<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="The faster, lighter and more compact version of the Bootstrap JavaScript components.">
    <meta name="keywords" content="JavaScript,Bootstrap,jQuery">
    <meta name="author" content="thednp">
    <link rel="shortcut icon" href="./assets/img/favicon.ico">
    <link rel="apple-touch-icon" href="./assets/img/apple-touch-icon.png">

    <title>BSN - Native JavaScript for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link id="bsCSS" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Prism: Code Highlight -->
    <link rel="stylesheet" href="./assets/css/prism-coy.css">

    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="./assets/css/theme.css">

    <!-- <script src="./assets/js/bootstrap-native.js"></script> -->
  </head>
  <body>
    <header class="navbar navbar-expand-md navbar-dark bg-purple position-static">
      <nav class="container-fluid">
        <a data-bs-toggle="tooltip" data-bs-placement="top" title="&lt;b&gt;Native JavaScript for Bootstrap&lt;/b&gt;&lt;br&gt;The sweetest Vanilla JavaScript library for everyone" class="navbar-brand me-auto me-md-2"  href="https://github.com/thednp/bootstrap.native/">
          <svg class="d-inline-block align-top" width="40" height="32" viewBox="0 0 118 94" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path fill="currentColor" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
          </svg>
          <span class="ms-1 hidden-xs">Bootstrap Native</span>
        </a>
        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="main-nav" class="navbar-collapse collapse">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <button class="nav-link" onclick="switchDirection.call(this)">RTL</button>
            </li>
            <li class="nav-item dropdown">
              <button class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Github</button>
              <div class="dropdown-menu dropdown-menu-end">
                <a class="dropdown-item" href="https://github.com/thednp/bootstrap.native/">Fork</a>
                <a class="dropdown-item" href="https://github.com/thednp/bootstrap.native/wiki">Wiki</a>
                <a class="dropdown-item" href="https://github.com/thednp/bootstrap.native/archive/master.zip">Download</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <button class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Share</button>
              <div class="dropdown-menu dropdown-menu-end">
                <a class="dropdown-item" target="_blank" rel="noreferrer" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/bootstrap.native/index.html" title="Share Native JavaScript for Bootstrap on Facebook">Facebook</a>
                <a class="dropdown-item" target="_blank" href="https://twitter.com/intent/tweet?text=Spread the word about %23BootstrapNative by @dnp_theme and download here http://thednp.github.io/bootstrap.native/index.html" title="Share Bootstrap Native on Twitter">
                  Twitter
                </a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <div id="carouselWrapper">
      <!-- style="touch-action: none;" -->
      <div id="myCarousel" class="carousel slide mb-0 mb-md-5" data-bs-ride="carousel" data-bs-interval="7000" data-bs-pause="hover" data-bs-keyboard="true"
      >
        <div class="carousel-indicators">
          <button aria-label="Download Native JavaScript for Bootstrap" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" data-bs-toggle="tooltip" data-bs-title="Welcome Page"></button>
          <button aria-label="Getting started with Native JavaScript" data-bs-target="#myCarousel" data-bs-slide-to="1" data-bs-toggle="tooltip" data-bs-title="Get Starter"></button>
          <button aria-label="Why BSN?" data-bs-target="#myCarousel" data-bs-slide-to="2" data-bs-toggle="tooltip" data-bs-title="Bootstrap Native"></button>
        </div>
        <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
            <div class="item-bg bg-warning"></div>
            <div class="container d-flex align-items-end h-100">
              <div class="position-relative text-dark text-left mb-5">
                <h1>Another Bootstrap?</h1>
                <p>The lighter and more compact set of JavaScript components for Bootstrap, sourced with Typescript codebase.<br>
                  At half the size of the original and around <b>21kb gZipped</b>, this library does it all.</p>
                <p>
                  <a class="btn btn-lg btn-primary me-1" href="https://github.com/thednp/bootstrap.native/archive/master.zip">Download</a>
                  <a class="btn btn-lg btn-secondary" href="https://www.npmjs.com/package/bootstrap.native">NPM</a>
                  <a class="btn btn-lg btn-secondary" href="https://www.jsdelivr.com/package/npm/bootstrap.native">CDN</a>
                </p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="item-bg bg-info"></div>
            <div class="container d-flex align-items-end h-100">
              <div class="position-relative text-dark w-100 mb-5">
                <h1>New to <span class="text-light">bootstrap.native</span>?</h1>
                <p>We launched the project back in 2015 with the goal of debunking the "write less do more" 
                  <a class="text-white" rel="noreferrer" href="http://blog.garstasio.com/you-dont-need-jquery/" target="_blank" role="button">myth</a>, meanwhile the Bootstrap developers
                  themselves have decided to drop jQuery, however we decided to keep maintaining the project for its many benefits and the learning experience.</p>
                <p><a class="btn btn-lg btn-light" rel="noreferrer" href="https://bloggie.io/@kinopyo/bootstrap-native-bootstrap-without-jquery" target="_blank" role="button">Check out this article</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="item-bg bg-danger"></div>
            <div class="container d-flex align-items-end h-100">
              <div class="position-relative text-white text-right w-100 mb-5">
                <h1>What's in it for me?</h1>
                <p>If you mainly use Bootstrap plugins for your projects, why not use a much lighter, potentially faster library, see a different perspective on the same challenges, 
                  interact with a less crowded community, get a better chance to learn or say hi!</p>
                <p><a class="btn btn-lg btn-light" rel="noreferrer" href="https://github.com/thednp/bootstrap.native/issues" target="_blank" role="button">Take a look</a></p>
              </div>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" data-bs-target="#myCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" data-bs-target="#myCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>

    <nav class="navbar navbar-light d-flex d-md-none bg-white sticky-top border-bottom">
      <div class="container">
        <span class="navbar-brand me-0 me-md-2" >
          <svg class="d-inline-block align-top" width="40" height="32" viewBox="0 0 118 94" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Native JavaScript for Bootstrap">
            <path fill="currentColor" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
          </svg>
          Components
        </span>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="mobileNav" class="offcanvas offcanvas-end" data-bs-backdrop="false" data-bs-scroll="true">
          <div class="offcanvas-body">
            <ul id="mobile-nav" class="navbar-nav flex-column">
              <li class="nav-item"><a class="nav-link" href="#componentAlert">Alert</a></li>
              <li class="nav-item"><a class="nav-link" href="#componentButton">Button</a></li>
              <li class="nav-item"><a class="nav-link" href="#componentCarousel">Carousel</a></li>
              <li class="nav-item"><a class="nav-link" href="#componentCollapse">Collapse</a></li>
              <li class="nav-item"><a class="nav-link" href="#componentDropdown">Dropdown</a></li>            
              <li class="nav-item"><a class="nav-link" href="#componentModal">Modal</a></li>
              <li class="nav-item"><a class="nav-link" href="#componentOffcanvas">Offcanvas</a></li>
              <li class="nav-item"><a class="nav-link" href="#componentPopover">Popover</a></li>
              <li class="nav-item"><a class="nav-link" href="#componentScrollspy">ScrollSpy</a></li>
              <li class="nav-item"><a class="nav-link" href="#componentTab">Tab</a></li>
              <li class="nav-item"><a class="nav-link" href="#componentToast">Toast</a></li>
              <li class="nav-item"><a class="nav-link" href="#componentTooltip">Tooltip</a></li>
              <li class="nav-item"><a class="nav-link" href="#componentBase">Base Component</a></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>

    <div class="container" id="container"  data-bs-spy="scroll" data-bs-target="#side-nav" data-bs-root-margin="0px 0px -25%">
      <section id="use">
        <h2>Read First</h2>
        <p>Alright, welcome to the demo page! Please make sure to check the <a href="https://github.com/thednp/bootstrap.native/wiki">Wiki pages</a>, 
          as they give you a quick start with everything else that isn't covered in this page, things like installing or using the library and
          other valuable guides on how to get the best out of it. Be sure to also check the pulse on the development or
          report <a href="https://github.com/thednp/bootstrap.native/issues">any issues</a>.</p>
      </section>
      <div class="row">
        <div class="col-md-9">
          <section id="componentAlert">
            <h2>Alert</h2>
            <p>The <b>Alert</b> component covers the specific original events and public methods, but just like the original plugin, does not provide any
              initialization option. It covers most essential JavaScript and DATA API, and does not require the class <code>alert-dismissible</code>
              for the initialization to work, however the <code>show</code> class must be present in order for its main method to work.</p>
          
            <section id="alertMethods">
              <h3>Alert Methods</h3>
              <p>The <b>Alert</b> component exposes two public methods and a static method to be used via JavaScript:</p>
              <h4>instance.close()</h4>
              <p>The method hides an initialized alert and removes the <code>&lt;div class="alert"&gt;</code> element from the DOM.</p>
              <h4>instance.dispose()</h4>
              <p>Removes the component from target element. If the alert has been closed, calling this method
                should produce no effect, since the alert was already removed from the DOM.</p>
              <h4>Alert.getInstance()</h4>
              <p>A <i>static</i> method that allows you to access an Alert instance associated to a DOM element.</p>
            </section>
          
            <section id="alertEvents">
              <h3>Alert Events</h3>
              <p>The component's original events are same as with the original component. The <code>event.target</code> of the 
                events is the <code>&lt;div class="alert"></code> element, and not the button with the <code>data-bs-dismiss="alert"</code>
                attribute.</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Event Type</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>close.bs.alert</code></td>
                      <td>This event is fired immediately when the <code>close</code> instance method has been called.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>closed.bs.alert</code></td>
                      <td>This event is fired when the alert has finished being hidden from the user.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          
            <section id="alertDATA">
              <h3>Alert DATA API</h3>
              <p>The component will initialize all elements with proper DATA API found in the DOM. Note that the
                <code>data-bs-dismiss="alert"</code> attribute is required for the triggering button. Also note
                that, differently from the original version, the <code>show</code> class is required for its main method.</p>
          
<pre><code class="language-markup">&lt;!-- notice the &lt;button&gt; with the data-bs-dismiss="alert" attribute --&gt;
&lt;div class="alert alert-warning alert-dismissible fade show" role="alert"&gt;
  &lt;button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"&gt;&lt;/button&gt;
  Some critical notice.
&lt;/div&gt;
</code></pre>
              <p>In this example the <b>Alert</b> component will find a child element of the <code>&lt;div class="alert"&gt;</code>
                with the <code>data-bs-dismsiss="alert"</code> attribute to use it as a trigger for its <code>.close()</code>
                public method.</p>

            </section>

            <section id="alertJS">
              <h3>Alert JavaScript API</h3>
              <p>After inserting a new alert into the page, you can initialize it via JavaScript. Considering the above markup,
                you can do the following:</p>
          
<pre><code class="language-javascript">// initialize
var myWarningAlertInit = new BSN.Alert('.alert');
</code></pre>
          
              <p>Also attach listeners to the original events:</p>
          
<pre><code class="language-javascript">// close.bs.alert
myAlert.addEventListener('close.bs.alert', function(event){
  // this event can be default prevented 
  // do something cool
  // event.target is &lt;div class="alert"&gt;
}, false);

// closed.bs.alert
myAlert.addEventListener('closed.bs.alert', function(event){
  // do something cool
  // event.target is &lt;div class="alert"&gt;
}, false);
</code></pre>
          
              <p>Similar to the original library, all components of this library expose a <i>static</i> method that allows you
                to easily access the instance even if it was created via the DATA API:</p>
          
<pre><code class="language-javascript">// find an element initialized via DATA API
var myAlert = document.querySelector('.alert');

// get the initialization object
var myAlertInit = BSN.Alert.getInstance(myAlert);

// apply the public methods
myAlertInit.close();
// or 
myAlertInit.dispose();
</code></pre>

            </section>
          
            <section id="alertExamples">
              <h3>Alert Examples</h3>
              <p>This alert has some listeners attached to <code>close.bs.alert</code> and <code>closed.bs.alert</code> events, so
                check your console.</p>
              <div id="alertDemo" class="alert alert-warning alert-dismissible fade show" role="alert">
                <button type="button" class="btn-close" data-bs-target="alertDemo" data-bs-dismiss="alert" aria-label="Close"></button>
                <b>Holy guacamole!</b> Best check yo self, you're not looking too good.
              </div>
          
              <p>This alert uses the <code>closed.bs.alert</code> event to show another alert.</p>
              <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                <h4>Oh snap! You got an error!</h4>
                <p>If you close this alert, your PC will start formatting your drive.</p>
                <button type="button" class="btn btn-danger">Take this action</button>
              </div>
          
            </section>
          </section>

          <section id="componentButton">
            <h2>Button</h2>
            <p>The <b>Button</b> component provides <a rel="noreferrer" href="https://getbootstrap.com/docs/5.0/components/buttons/"
              target="_blank">state toggle</a> functionality identical to the original plugin. Our previously featured component 
              has been completely deprecated, just like the original plugin. The functionality of the previous component has been
              replaced by a new HTML markup and CSS style that requires no scripting.</p>

            <p>The component state toggle functionality is very simple: when the user clicks the button, the component adds / removes 
              the <code>active</code> class name as well as change its <code>aria-pressed</code> attribute to <code>true</code> 
              / <code>false</code>, both actions signalling the state and appearence of that particular button. However if the button 
              is disabled, the state toggling is prevented.</p>

            <section id="buttonMethods">
              <h3>Button Methods</h3>
              <h4>instance.toggle()</h4>
              <p>Toggles the state of a button. When pushed it changes the appearence of the button.</p>
              <h4>instance.dispose()</h4>
              <p>Removes the component from target element. Its toggle state is not changed.</p>
              <h4>Button.getInstance()</h4>
              <p>A <i>static</i> method that allows you to access a Button instance associated to a DOM element.</p>

            </section>
          
            <section id="buttonDATA">
              <h3>Button DATA API</h3>
              <p>The component will initialize all elements with the <code>data-bs-toggle="button"</code> attribute on page load.
                The basic markup looks like this:</p>
          
<pre><code class="language-markup">&lt;!-- button tags --&gt;
&lt;button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off"&gt;Toggle button&lt;/button&gt;
&lt;button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true"&gt;Active toggle button&lt;/button&gt;
&lt;button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off"&gt;Disabled toggle button&lt;/button&gt;
</code></pre>

<pre><code class="language-markup">&lt;!-- anchor tags --&gt;
&lt;a href="#" class="btn btn-primary" role="button" data-bs-toggle="button"&gt;Toggle link&lt;/a>
&lt;a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true"&gt;Active toggle link&lt;/a>
&lt;a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button"&gt;Disabled toggle link&lt;/a>
</code></pre>

            </section>

            <section id="buttonJS">
              <h3>Button JavaScript API</h3>

              <p>If the above markup is present in the DOM when the library is loaded, the component will initialize all targets via DATA API,
                however if inserted later into the DOM, here's how to initialize it:</p>
          
<pre><code class="language-javascript">// initialize
var myButtonINIT = new BSN.Button('#myButton');
</code></pre>
          
              <p>The <code>&lt;button id="myButton"&gt;</code> element is now initialized, you can access the instance object anywhere you need:</p>
          
<pre><code class="language-javascript">// reference the initialization, even for DATA API initialized btn-group elements
var myButtonINIT = BSN.Button.getInstance('#myButton');
</code></pre>
          
            </section>
          
            <section id="buttonExamples">
              <h3>Button Examples</h3>

              <h4>State Toggle</h4>

              <p>
                <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
                <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
                <button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
              </p>

              <p>
                <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
                <a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
                <a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" data-bs-toggle="button">Disabled toggle link</a>
              </p>
          
              <h4>Checkboxes and Radio</h4>

              <p>The following examples are purely for demo and only require the proper markup, no script is required.</p>
              <p>
                <span id="checkboxButtons" class="btn-group btn-group-toggle">
                  <input id="check1" type="checkbox" class="btn-check" checked>
                  <label for="check1" class="btn btn-outline-secondary">
                    <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                      <path d="M610.97 656.333c0 0 361.421-260.813 321.331-559.309-0.87-6.502-3.021-10.906-5.734-13.722-2.765-2.816-7.014-5.018-13.466-5.888-291.686-41.011-546.509 328.806-546.509 328.806-221.082-26.47-205.005 17.613-305.869 259.891-19.302 46.182 11.981 62.106 46.285 49.101 34.304-12.902 109.978-41.523 109.978-41.523l132.608 135.578c0 0-27.955 77.517-40.602 112.589-12.698 35.123 2.816 67.123 48.026 47.411 236.749-103.219 279.859-86.733 253.952-312.934z m51.66-302.899c-30.618-31.386-30.618-82.125 0-113.51 30.618-31.283 80.23-31.283 110.899 0 30.618 31.283 30.618 82.074 0 113.51-30.669 31.283-80.333 31.283-110.899 0z" fill="currentColor"></path>
                    </svg>
                    Checkbox 1 (pre-checked)
                  </label>
                  <input id="check2" class="btn-check" type="checkbox"> 
                  <label for ="check2" class="btn btn-outline-secondary">
                    Checkbox 2
                  </label>
                  <input id="check3" class="btn-check" type="checkbox">
                  <label for="check3" class="btn btn-outline-secondary">
                    Checkbox 3
                  </label>
                </span>
              </p>

              <p>
                <span id="radioButtons" class="btn-group btn-group-toggle"> 
                  <input id="radio1" type="radio" class="btn-check" name="optionz" checked>
                  <label for="radio1" class="btn btn-outline-dark">
                    <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                      <path d="M610.97 656.333c0 0 361.421-260.813 321.331-559.309-0.87-6.502-3.021-10.906-5.734-13.722-2.765-2.816-7.014-5.018-13.466-5.888-291.686-41.011-546.509 328.806-546.509 328.806-221.082-26.47-205.005 17.613-305.869 259.891-19.302 46.182 11.981 62.106 46.285 49.101 34.304-12.902 109.978-41.523 109.978-41.523l132.608 135.578c0 0-27.955 77.517-40.602 112.589-12.698 35.123 2.816 67.123 48.026 47.411 236.749-103.219 279.859-86.733 253.952-312.934z m51.66-302.899c-30.618-31.386-30.618-82.125 0-113.51 30.618-31.283 80.23-31.283 110.899 0 30.618 31.283 30.618 82.074 0 113.51-30.669 31.283-80.333 31.283-110.899 0z" fill="currentColor"></path>
                    </svg>
                    Radio 1 (preselected)
                  </label>
                  <input id="radio2" type="radio" class="btn-check" name="optionz">
                  <label for="radio2" class="btn btn-outline-dark">
                    Radio 2
                  </label>
                  <input id="radio3" type="radio" class="btn-check" name="optionz">
                  <label for="radio3" class="btn btn-outline-dark">
                    Radio 3
                  </label>
                </span>
              </p>
          
              <p>
                <span class="btn-group-toggle">
                  <input id="radio21" type="radio" class="btn-check" name="features">
                  <label for="radio21" class="btn btn-outline-primary">
                    <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                      <path d="M610.97 656.333c0 0 361.421-260.813 321.331-559.309-0.87-6.502-3.021-10.906-5.734-13.722-2.765-2.816-7.014-5.018-13.466-5.888-291.686-41.011-546.509 328.806-546.509 328.806-221.082-26.47-205.005 17.613-305.869 259.891-19.302 46.182 11.981 62.106 46.285 49.101 34.304-12.902 109.978-41.523 109.978-41.523l132.608 135.578c0 0-27.955 77.517-40.602 112.589-12.698 35.123 2.816 67.123 48.026 47.411 236.749-103.219 279.859-86.733 253.952-312.934z m51.66-302.899c-30.618-31.386-30.618-82.125 0-113.51 30.618-31.283 80.23-31.283 110.899 0 30.618 31.283 30.618 82.074 0 113.51-30.669 31.283-80.333 31.283-110.899 0z" fill="currentColor"></path>
                    </svg>
                    Radio 1
                  </label>
                  <input id="radio22" type="radio" class="btn-check" name="features" checked>
                  <label for="radio22" class="btn btn-outline-primary">
                    Radio 2 (preselected)
                  </label>
                  <input id="radio23" type="radio" class="btn-check" name="features">
                  <label for="radio23" class="btn btn-outline-primary">
                    Radio 3
                  </label>
                </span>
              </p>
          
            </section>
          </section>

          <section id="componentCarousel">
            <h2>Carousel</h2>
            <p>The <b>Carousel</b> component covers the original events, as well as a set of essential options and public methods. 
              In addition it also provides a solid DATA API, it adds a <code>paused</code> class to the target element when in
              paused state, and a solid event handling implementation.</p>
            <p>The component implements a <a href="https://github.com/thednp/shorter-js/blob/master/src/misc/timer.js">
              lock mechanism</a> to guard over trigger events making it virtually impossible to break.</p>
            <section id="carouselOptions">
              <h3>Carousel Options</h3>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Type</th>
                      <th>Default</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>keyboard</code></td>
                      <td><em>boolean</em></td>
                      <td><em>true</em></td>
                      <td>Option that allows the user to navigate the carousel with left and right arrow keys. If you want to
                        disable this feature, do that via JavaScript or the <code>data-bs-keyboard="false"</code> attribute.</td>
                    </tr>
                    <tr>
                      <td><code>pause</code></td>
                      <td><em>boolean</em><br>or<br> the text <em>'hover'</em></td>
                      <td><em>'hover'</em></td>
                      <td>Option that makes possible to pause the carousel transition on mouse hover and touchdown. You can
                        disable this via JavaScript or the <code>data-bs-pause="false"</code> attribute.</td>
                    </tr>
                    <tr>
                      <td><code>touch</code></td>
                      <td><em>boolean</em></td>
                      <td><em>true</em></td>
                      <td>Option that enables support for touch events. This option is <code>true</code> by default, but you can 
                        disable it via JavaScript or the <code>data-bs-touch="false"</code> attribute.</td>
                    </tr>
                    <tr>
                      <td><code>interval</code></td>
                      <td><em>number</em></td>
                      <td><em>5000</em></td>
                      <td>Sets the component's delay between transitions in miliseconds. Can be set via JavaScript or the
                        <code>data-bs-interval="INTERVAL"</code> attribute. If you want to disable the automatic transition, you can
                        set this option to <em>false</em>. The component will not automatically slide if the element is 
                        not visible in the viewport.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          
            <section id="carouselMethods">
              <h3>Carousel Methods</h3>
              <h4>instance.cycle()</h4>
              <p>The method will cycle through items. Using the method while the animation is running will produce no effect.</p>
              <h4>instance.pause()</h4>
              <p>The method will pause the automatic cycle of the carousel. To resume, you can use the above <code>.cycle()</code>
                method.</p>
              <h4>instance.to()</h4>
              <p>The method will allow you to jump to the index of a certain item. Using the
                method while the animation is running will produce no effect.</p>
              <h4>instance.next()</h4>
              <p>The method will allow you to jump to the <b>next</b> item. This uses the above <code>.to()</code> method.</p>
              <h4>instance.prev()</h4>
              <p>The method will allow you to jump to the <b>previous</b> item. This uses the above <code>.to()</code> method.</p>
              <h4>instance.dispose()</h4>
              <p>Removes the component from target element.</p>
              <h4>Carousel.getInstance()</h4>
              <p>A <i>static</i> method that allows you to access a Carousel instance associated to a DOM element.</p>

              <p><b>Note</b> The previously featured instance method <code>.getActiveIndex()</code> has been deprecated in favor of
                custom event properties which provide much more information from the instance execution context.</p>
            </section>
          
            <section id="carouselEvents">
              <h3>Carousel Events</h3>
              <p>The <b>Carousel</b> component exposes two events that allow you to trigger custom functionality when the carousel slides.</p> 
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Event Type</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>slide.bs.carousel</code></td>
                      <td>This event fires immediately when the <code>slideTo()</code> instance method is called.<br>
                        <b>This event can be default prevented.</b></td>
                      </tr>
                    <tr>
                      <td><code>slid.bs.carousel</code></td>
                      <td>This event is fired when transition has finished.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>These component specific events are triggered on the <code>&lt;div class="carousel"&gt;</code> element and 
                both expose the following additional properties:</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Event Property</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>direction</code></td>
                      <td>The direction the carousel is sliding, either <code>left</code> or <code>right</code>.</td>
                    </tr>
                    <tr>
                      <td><code>from</code></td>
                      <td>The index of the current active carousel item (integer starting with <code>0</code> index).</td>
                    </tr>
                    <tr>
                      <td><code>to</code></td>
                      <td>The index of the next active carousel item.</td>
                    </tr>
                    <tr>
                      <td><code>relatedTarget</code></td>
                      <td>The DOM element which is the next active carousel item.</td>
                    </tr>
                  </tbody>
                </table>
              </div>  
            </section>
            
            <section id="carouselDATA">
              <h3>Carousel DATA API</h3>
              <p>The component covers most of the original implementation in regards to DATA API, except that you can ignore
                some of the attributes for the controls, but they must have at least their specific class in order to work. 
                This is a basic template markup followed by a complete attributes breakdown:</p>
          
<pre><code class="language-markup">&lt;!-- the Carousel component --&gt;
&lt;div id="myCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000" data-bs-touch="true" data-bs-pause="hover"&gt;
  &lt;!-- Indicators --&gt;
  &lt;div class="carousel-indicators"&gt;
    &lt;button data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"&gt;&lt;/button&gt;
    &lt;button data-bs-target="#myCarousel" data-bs-slide-to="1"&gt;&lt;/button&gt;
    &lt;button data-bs-target="#myCarousel" data-bs-slide-to="2"&gt;&lt;/button&gt;
  &lt;/div&gt;
  &lt;!-- Wrapper for slides --&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;div class="carousel-item active"&gt;
      &lt;img class="img-fluid" src="..." alt="..."&gt;
      &lt;div class="carousel-caption"&gt;
      &lt;h3&gt;This is a carousel caption&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="carousel-item"&gt;
      &lt;img class="img-fluid" src="..." alt="..."&gt;
      &lt;div class="carousel-caption"&gt;
      &lt;h3&gt;This is a caption&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="carousel-item"&gt;
      &lt;img class="img-fluid" src="..." alt="..."&gt;
      &lt;div class="carousel-caption"&gt;
      &lt;h3&gt;This is another caption&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;!-- Controls --&gt;
  &lt;a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev"&gt;
    &lt;span class="carousel-control-prev-icon" aria-hidden="true">&lt;/span>
    &lt;span class="visually-hidden">Prev&lt;/span>
  &lt;/a&gt;
  &lt;a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next"&gt;
    &lt;span class="carousel-control-next-icon" aria-hidden="true">&lt;/span>
    &lt;span class="visually-hidden">Next&lt;/span>
  &lt;/a&gt;
&lt;/div&gt;
</code></pre>
              <h4>Attributes Breakdown</h4>
              <ul>
                <li><code>id="myCarousel"</code> is <b>only</b> required for controls outside the scope of the element itself;</li>
                <li><code>data-bs-ride="carousel"</code> is the attribute required if you want the <b>Carousel</b> component
                  to initialize your element automatically;</li>
                <li><code>data-bs-keyboard="false"</code> (not shown in the sample markup) is the attribute that enables 
                  navigation via keyboard left and right arrow keys, but only if the target element is visible in the viewport;</li>
                <li><code>data-bs-interval="5000"</code> sets the automatic slide interval; the <code>false</code> value will 
                  disable automatic slide transition; the usage of this attribute for each item is not implemented in BSN;</li>
                <li><code>data-bs-pause="hover"</code> is the attribute you can set to pause the carousel on mouse hover, but 
                  it also adds a <code>paused</code> class to your carousel; if the above attribute <code>data-bs-interval</code>
                  is <code>false</code>, this setting has no effect;</li>
                <li><code>data-bs-touch="true"</code> is the attribute you can set to enable touch support for your carousel,
                  however, you must have at least 3 <code>.carousel-item</code> elements in order to work;</li>
                <li><code>data-bs-slide-to="0"</code> is an attribute used by elements of the <code>.carousel-indicators</code>;
                  when clicked, it will transition to the carousel item with the specified index, which is 0 (zero) in this case;</li>
                <li><code>data-bs-slide="prev"</code> / <code>data-bs-slide="next"</code> when clicked, will transition to the next /
                  previous carousel item;</li>
                <li><code>data-bs-target="#myCarousel"</code> attribute is <b>required</b> for any of the Carousel controls outside
                  the scope of the carousel element itself and <b>optional</b> for indicators / controls inside;</li>
                <li><code>class="carousel-item active"</code> / <code>class="active"</code> when <em>active</em> class is 
                  present for a carousel item or indicator, that indicates which carousel item is currently shown to the user.</li>
              </ul>

              <h4>Right To Left languages</h4>
              <p>The Carousel component provides support for RTL Languages but the functionality has some specific requirements:</p>
              <ul>
                <li>first, you need to make sure your markup matches the <a href="https://getbootstrap.com/docs/5.1/getting-started/rtl/">
                  original library requirements</a>;</li>
                <li>as is, the component should work out of the box, you may need some additional styling if you choose to use custom
                  icons for the indicators or navigation controls.</li>
              </ul>
            </section>

            <section id="carouselJS">
              <h3>Carousel JavaScript API</h3>
              <p>The component grants full access to the internal working via JavaScript; whether via the public methods or the
                original events, you can do a whole bunch of things. Assuming the above markup have been injected into the DOM,
                let's go ahead and initialize it:</p>
          
<pre><code class="language-javascript">// initialize with some options
var myCarouselInit = new BSN.Carousel('#myCarousel', {
  // these options values will override the ones set via DATA API
  interval: false,
  pause: false,
  keyboard: false
});
</code></pre>
          
              <p>And now we can play with the methods:</p>
          
<pre><code class="language-javascript">// call next() to jump to the next item
myCarouselInit.next();

// jump to the item with index 2
myCarouselInit.to(2);

// if the carousel was set with `interval: NUMBER`
// call this method to pause the automatic cycle
myCarouselInit.pause();

// if the carousel was set with `interval: false`
// we can do this to go to the next item
// AND resume if `interval: NUMBER` is used
myCarouselInit.cycle();

// anytime you need to destroy
myCarouselInit.dispose();
</code></pre>


              <p>Additional interaction can be coded around the original events:</p>

<pre><code class="language-javascript">// this event handler function will run when the carousel begins to slide
document.querySelector('.carousel').addEventListener('slide.bs.carousel', event => {
  if (event.target.id !== 'myCarousel') {
    event.preventDefault(); // preventDefault for your special case
    return;
  }
  // or do something with the event specific properties
  console.log("The carousel is sliding " + event.direction);
  console.log("The carousel is sliding to index " + event.to);
  console.log("The carousel is sliding from index " + event.from);
});
</code></pre>

              <p>Access the instance object anywhere, even for instances where the DATA API was used:</p>

<pre><code class="language-javascript">// get some carousel item and reference the initialization
var mySpecialCarouselInit = BSN.Carousel.getInstance('#mySpecialCarousel');

// apply methods
mySpecialCarouselInit.cycle();
</code></pre>

            </section>
            
            <section id="carouselExamples">
              <h3>Carousel Example</h3>
              <p>This is a test demonstrating the component capabilities and it's original events, you should open the console and start
                clicking, you will be notified before and after the animation. Also know that there was no active item set by
                default in the markup, proving the component can successfully manage this case by setting the first item as active
                on initialization.</p>
              <div class="thumbnail">
                <div id="carouselGenericExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
                  <!-- Indicators -->
                  <div class="carousel-indicators">
                    <button data-bs-target="#carouselGenericExample" data-bs-slide-to="0"></button>
                    <button data-bs-target="#carouselGenericExample" data-bs-slide-to="1"></button>
                    <button data-bs-target="#carouselGenericExample" data-bs-slide-to="2"></button>
                  </div>
                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">
                    <div class="carousel-item">
                      <img class="img-fluid" src="https://unsplash.it/966/300?image=0" alt="">
                      <div class="carousel-caption">
                        <h3>This is another carousel</h3>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <img class="img-fluid" src="https://unsplash.it/966/300?image=10" alt="">
                      <div class="carousel-caption">
                        <h3>This is a caption</h3>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <img class="img-fluid" src="https://unsplash.it/966/300?image=210" alt="">
                      <div class="carousel-caption">
                        <h3>This is another caption</h3>
                      </div>
                    </div>
                  </div>
          
                  <!-- Controls -->
                  <button class="carousel-control-prev" role="button" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                  </button>
                  <button class="carousel-control-next" role="button" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                  </button>
                </div>
              </div>

              <div class="btn-group my-3">
                <button class="btn btn-outline-secondary" data-bs-target="#carouselGenericExample" data-bs-slide-to="0">START</button>
                <button class="btn btn-outline-secondary" data-bs-target="#carouselGenericExample" data-bs-slide="prev">PREV</button>
                <button class="btn btn-outline-secondary" data-bs-target="#carouselGenericExample" data-bs-slide="next">NEXT</button>
              </div>
              <p>These three independent buttons use some inline JavaScript to control the carousel:</p>
<pre><code class="language-markup">&lt;button data-bs-target="#myCarousel" data-bs-slide-to="0" class="btn btn-secondary">
  START
&lt;/button>

&lt;button data-bs-target="#myCarousel" data-bs-slide="prev" class="btn btn-secondary">
  PREV
&lt;/button>

&lt;button data-bs-target="#myCarousel" data-bs-slide="next" class="btn btn-secondary">
  NEXT
&lt;/button>
</code></pre>

              <p>This highlights the fact that we don't need to use <code>href="#myCarousel"</code>
                or <code>data-bs-target="#myCarousel"</code> attributes for the controls inside the carousel itself, 
                however if the carousel itself has an ID, these attributes used in the above markup shows you how to
                easily control it with elements outside the carousel.

            </section>
          </section>

          <section id="componentCollapse">
            <h2>Collapse</h2>
            <p>The <b>Collapse</b> component covers the original events and methods of the jQuery plugin counterpart. This
              component understands there is a triggering element that finds its target collapsible element via the
              <code>data-bs-target="#collapse-id"</code> attribute or the <code>href="#collapse-id"</code> attribute if it's a link.
            </p>
          
            <section id="collapseOptions">
              <h3>Collapse Options</h3>
              <p>The option below allow you to connect a collapse to a parent accordion.</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Type</th>
                      <th>Default</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>parent</code></td>
                      <td><em>selector</em><br>or<br>reference</td>
                      <td></td>
                      <td>Option to reference a parent to be used as an accordion. When a parent is set and found, it will enable
                        the functionality described in the <code>show()</code> method below. Can be set
                        via JavaScript or the <code>data-bs-parent="SELECTOR"</code> attribute when used for 
                        the <code>&lt;div class="collapse"&gt;</code> element.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          
            <section id="collapseMethods">
              <h3>Collapse Methods</h3>
              <p>Calling any of the public methods while animation is running, will produce no effect.</p>

              <h4>instance.show()</h4>
              <p>The method will expand a collapsible element. In addition, if the collapsible
                element is part of an accordion (it's options include a reference to a parent), 
                it will also close any other visible collapsible element.</p>
              <h4>instance.hide()</h4>
              <p>The method hides a collapsible element.</p>
              <h4>instance.toggle()</h4>
              <p>The method will show or hide a collapsible element using the above methods and
                their full functionalities, based on the visibility state at the time of the call.</p>
              <h4>instance.dispose()</h4>
              <p>Removes the component from target element.</p>
              <h4>Collapse.getInstance()</h4>
              <p>A <i>static</i> method that allows you to access a Collapse instance associated to a DOM element.</p>

            </section>
          
            <section id="collapseEvents">
              <h3>Collapse Events</h3>
              <p>All the component's events are attached to the collapsible element and not its targeting button / element, with
                other words, the <code>event.target</code> is the element with the <code>class="collapse"</code> attribute.</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Event Type</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>show.bs.collapse</code></td>
                      <td>This event fires immediately when the <code>show</code> instance method is called.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>shown.bs.collapse</code></td>
                      <td>This event is fired when a collapse element has been made visible to the user.</td>
                    </tr>
                    <tr>
                      <td><code>hide.bs.collapse</code></td>
                      <td> This event is fired immediately when the <code>hide</code> method has been called. <br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>hidden.bs.collapse</code></td>
                      <td>This event is fired when a collapse element has been hidden from the user.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          
            <section id="collapseDATA">
              <h3>Collapse DATA API</h3>
              <p>In the following markup, the component will initialize the two <code>.btn</code> elements with the
                <code>data-bs-toggle="collapse"</code> attribute, both refferencing the same collapsible element via
                specific <code>HTMLElement</code> attributes.</p>
          
<pre><code class="language-markup">&lt;!-- toggle collapse via link with HREF reference --&gt;
&lt;a id="collapseLink" class="btn btn-primary" role="button" aria-expanded="false" aria-controls="collapseExample"
  data-bs-toggle="collapse" href="#collapseExample"&gt; &lt;!-- required DATA API --&gt;
  Link with href
&lt;/a&gt;

&lt;!-- AND / OR toggle collapse via button with data-bs-target attribute reference --&gt;
&lt;button id="collapseButton" class="btn btn-primary" type="button" aria-expanded="false" aria-controls="collapseExample"
  data-bs-toggle="collapse" data-bs-target="#collapseExample"&gt; &lt;!-- required DATA API --&gt;
  Button with data-bs-target
&lt;/button&gt;

&lt;!-- and the basic collapsible template --&gt;
&lt;div class="collapse" id="collapseExample"&gt;
  &lt;div class="card card-body"&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
          
              <p>Now if we stack multiple collapsible elements and wrap them into one parent with an ID attribute and / or some helper
                CSS classes, we can easily create an accordion.</p>
          
<pre><code class="language-markup">&lt;!-- accordion template --&gt;
&lt;div class="accordion" id="accordionExample">
  &lt;div class="accordion-item">
    &lt;h2 class="accordion-header" id="headingOne">
      &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        Accordion Item #1
      &lt;/button>
    &lt;/h2>
    &lt;div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      &lt;div class="accordion-body">
        Accordion item 1 content.
      &lt;/div>
    &lt;/div>
  &lt;/div>
  &lt;div class="accordion-item">
    &lt;h2 class="accordion-header" id="headingTwo">
      &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      &lt;/button>
    &lt;/h2>
    &lt;div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      &lt;div class="accordion-body">
        Accordion item 2 content.
      &lt;/div>
    &lt;/div>
  &lt;/div>
  &lt;div class="accordion-item">
    &lt;h2 class="accordion-header" id="headingThree">
      &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      &lt;/button>
    &lt;/h2>
    &lt;div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      &lt;div class="accordion-body">
        Accordion item 3 content.
      &lt;/div>
    &lt;/div>
  &lt;/div>
&lt;/div>
</code></pre>
          
            </section>
            <section id="collapseJS">

              <h3>Collapse JavaScript API</h3>
              <p>First, you need to initialize it via JavaScript:</p>

<pre><code class="language-javascript">// initialize the component for collapse
var myCollapseInit = new BSN.Collapse('.collapse')
</code></pre>
          
              <p>This now enables you to work with the public methods.</p>
          
<pre><code class="language-javascript">// call the show() right away
myCollapseInit.show();

// call the hide() later
myCollapseInit.hide();

// OR call toggle() some other time
myCollapseInit.toggle();

// lastly, destroy when needed
myCollapseInit.dispose();
</code></pre>
          
              <p>Also we can attach some listeners to the original events:</p>
          
<pre><code class="language-javascript">// first, we need to reference the collapse element
var myCollapseExample = document.getElementById('#myCollapseExample');

// attach a handler to the `show.bs.collapse` original event
myCollapseExample.addEventListener('show.bs.collapse', (event) => {
  // do something cool when .show() method is called
  // event.target is myCollapseExample
}, false);
</code></pre>
          
              <p>Alright, now let's say the above accordion template have been inserted into the DOM, you need to initialize its
                collapsible elements right away via JavaScript.</p>
          
<pre><code class="language-javascript">// grab the accordion by its ID
var myAccordion = document.getElementById('myAccordion');

// grab the collapse elements of this accordion
var myAccordionCollapses = myAccordion.querySelectorAll('.collapse');

// initialize the component for each collapse trigger
Array.from(myAccordionCollapses).forEach((collapse) => 
  new BSN.Collapse(
    collapse,
    {
      parent: myAccordion
    }
  )
)
</code></pre>
          
              <p>The component also allows access to the instance object:</p>
          
<pre><code class="language-javascript">// grab the collapse initialized via DATA API
var myCollapseInit = BSN.Collapse.getInstance('#myCollapse');

// call any public method
myCollapseInit.toggle();
</code></pre>
          
            </section>

            <section id="collapseExamples">
              <h3>Collapse Examples</h3>
              <h4>Single collapsible element</h4>
              <p>Here's a quick demo with a single collapsible element, using the <code>.card</code> as the container, exactly as
                described in the <a href="#collapseDATA">DATA API</a> section. The demo also features the original events.</p>
              <div id="collapseExampleWrapper">
                <p>
                  <span class="btn-group">
                    <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" aria-expanded="true"
                      aria-controls="collapseExample">
                      <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                        <path d="M610.97 656.333c0 0 361.421-260.813 321.331-559.309-0.87-6.502-3.021-10.906-5.734-13.722-2.765-2.816-7.014-5.018-13.466-5.888-291.686-41.011-546.509 328.806-546.509 328.806-221.082-26.47-205.005 17.613-305.869 259.891-19.302 46.182 11.981 62.106 46.285 49.101 34.304-12.902 109.978-41.523 109.978-41.523l132.608 135.578c0 0-27.955 77.517-40.602 112.589-12.698 35.123 2.816 67.123 48.026 47.411 236.749-103.219 279.859-86.733 253.952-312.934z m51.66-302.899c-30.618-31.386-30.618-82.125 0-113.51 30.618-31.283 80.23-31.283 110.899 0 30.618 31.283 30.618 82.074 0 113.51-30.669 31.283-80.333 31.283-110.899 0z" fill="currentColor"></path>
                      </svg>
                      HREF
                    </a>
                    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
                      aria-expanded="true" aria-controls="collapseExample">data-bs-target</button>
                  </span>
                </p>
                <div class="collapse" id="collapseExample">
                  <div class="card card-body mb-3">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
                    keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                  </div>
                </div>
              </div>
          
              <h4>Accordion / Multiple Collapsible Elements</h4>
              <p>Here's an <b>Accordion</b> example, built with a dedicated markup from the original plugin. When the toggle links are
                clicked, our <b>Collapse</b> component will look for the closest <code>&lt;div class="accordion-className"&gt;</code> or
                <code>&lt;div id="accordion-id"&gt;</code> via <code>data-bs-parent="selector"</code> and will hide any expanded
                collapse element.</p>

              <div class="accordion mb-3" id="accordionExample">
                <div class="accordion-item">
                  <h4 class="accordion-header" id="headingOne">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                      aria-expanded="false" aria-controls="collapseOne">
                      Accordion Item #1
                    </button>
                  </h4>
                  <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds
                        the appropriate classes that we use to style each element. These classes control the overall appearance, as well
                        as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
                        It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                    </div>
                  </div>
                </div>
                <div class="accordion-item">
                  <h4 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                      Accordion Item #2
                    </button>
                  </h4>
                  <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate
                      classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS
                      transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about
                      any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                    </div>
                  </div>
                </div>
                <div class="accordion-item">
                  <h4 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"
                    aria-expanded="false" aria-controls="collapseThree">
                      Accordion Item #3
                    </button>
                  </h4>
                  <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                      <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate
                      classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS
                      transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about
                      any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                    </div>
                  </div>
                </div>
              </div>

              <p>Remember that all triggering buttons must reference the accordion via <code>data-bs-parent="selector"</code> as
                described above in order to collapse current opened collapsible element.</p>
            </section>
          </section>

          <section id="componentDropdown">
            <h2>Dropdown</h2>
            <p>The <b>Dropdown</b> component covers most of the functionality from the original plugin in terms of original events,
              instance methods and options, but also offers some additional functionality without using any third party library.</p>
            <p>To get on par with the original plugin, our component now features automatic repositioning but without the use of Popper.js,
              but with <a href="https://github.com/thednp/position-observer">PositionObserver</a> to update the menu's position.</p>
            <p>Here's how it works:</p>
            <ul>
              <li>when showing the dropdown menu to the user, the component will calculate all possible positions and update the menu 
                position so that the it's always displayed fully into the viewport;</li>
              <li>while the dropdown menu is visible to the user, the observer will trigger the update of dropdown menu position,
                just like when showing it again to the user.</li>
            </ul>

            <p>The component supports accessibility features:</p>
            <ul>
              <li><kbd>Up</kbd> and <kbd>Down</kbd> arrow keys will enable users to select menu items, and also when pressed, the
                event handler will prevent default scroll behavior;</li>
              <li><kbd>Esc</kbd> key will now close the dropdown, a feature previously supported, but reworked it's
                <code>keyHandler</code> to support the above new features;</li>
              <li><kbd>Enter</kbd> key will work as if click event triggered, the new event handler expectes the default browser
                behavior, let's hope it stays that way;</li>
              <li>closing the dropdown will now focus the triggering button.</li>
            </ul>

            <p>This version of the <b>Dropdown</b> component for Bootstrap 5 no longer supports nesting due to the implementation of 
              automatic repositioning, added RTL Languages support and ES6+ class conversion.</p>

            <section id="dropdownOptions">
              <h3>Dropdown Options</h3>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Type</th>
                      <th>Default</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>display</code></td>
                      <td><em>string</em></td>
                      <td><em>dynamic</em></td>
                      <td>Option to enable automatic positioning of the <code>.dropdown-menu</code> element. When shown to the user, 
                        the <code>.dropdown-menu</code> element can be re-positioned on resize / scroll in a way that it must be visible
                        where it has the most available space.
                        <br>To disable this option, you can set the "static" value for this option.
                        <br>This option does not affect the re-positioning that happens on show.
                      </td>
                    </tr>
                    <tr>
                      <td><code>offset</code></td>
                      <td><em>number</em></td>
                      <td><em>5</em></td>
                      <td>Option to set the spacing required for the <code>.dropdown-menu</code> relative to the toggle button.
                        Unlike the original plugin, this unique value is used to distance the menu away from its triggering element
                        for all vertical and horizontal position variations.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>The previously featured <code>persist</code> options has been deprecated. The <code>.dropdown-menu</code> can be or
                contain a <code>&lt;form&gt;</code> element, in which case the component will not dismiss it when the user would click
                or focus inside, but allow the user to interact with it.</p>
              <p>Thanks to its built in functionality independent from Popper.js, our Dropdown component does't require the following
                original plugin options: <code>boundary</code>, <code>reference</code> and <code>popperConfig</code>;
                the <code>autoClose</code> option is not implemented yet.</p>
            </section>

            <section id="dropdownMethods">
              <h3>Dropdown Methods</h3>

              <h4>instance.show()</h4>
              <p>Shows the dropdown-menu.</p>
              <h4>instance.hide()</h4>
              <p>Hides the dropdown-menu.</p>
              <h4>instance.toggle()</h4>
              <p>For a given initialization the method shows the dropdown-menu if hidden or hides
                it otherwise using the above two methods.</p>
              <h4>instance.dispose()</h4>
              <p>Removes the component from target element.</p>
              <h4>Dropdown.getInstance()</h4>
              <p>A <i>static</i> method that allows you to access a Dropdown instance associated to a DOM element.</p>

            </section>
          
            <section id="dropdownEvents">
              <h3>Dropdown Events</h3>
              <p>The <b>Dropdown</b> component covers the original events and the target of all events is the 
                <code>&lt;div class="dropdown"&gt;</code> element or the parent of the element with the 
                <code>data-bs-toggle="dropdown"</code> attribute.</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Event Type</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>show.bs.dropdown</code></td>
                      <td>This event fires immediately when the show instance method is called.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>shown.bs.dropdown</code></td>
                      <td>This event is fired when the dropdown has been made visible to the user.</td>
                    </tr>
                    <tr>
                      <td><code>hide.bs.dropdown</code></td>
                      <td>This event is fired immediately when the hide instance method has been called.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>hidden.bs.dropdown</code></td>
                      <td>This event is fired when the dropdown has finished being hidden from the user.</td>
                    </tr>
                    <tr>
                      <td><code>updated.bs.dropdown</code></td>
                      <td>This event is fired after the dropdown menu has updated it's position.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>For all Dropdown events the <code>event.relatedTarget</code> is the element with the initialization 
                <code>data-bs-toggle="dropdown"</code>.</p>
            </section>


            <section id="dropdownDATA">
              <h3>Dropdown DATA API</h3>
              <p>Notice we use same markup as the original example, the triggering element with the
                <code>data-bs-toggle="dropdown"</code> attribute will initialize the <b>Dropdown</b> component.</p>
          
<pre><code class="language-markup">&lt;!-- basic dropdown template --&gt;
&lt;div class="dropdown"&gt;
  &lt;button id="myDropdown" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
    Dropdown button
  &lt;/button&gt;
  &lt;div class="dropdown-menu" aria-labelledby="myDropdown"&gt;
    &lt;a class="dropdown-item" href="#">Action 1&lt;/a>
    &lt;a class="dropdown-item" href="#">Action 2&lt;/a>
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </section>

            <section id="dropdownJS">
              <h3>Dropdown JavaScript API</h3>
              <p>When you want full control or you need a way to handle dynamically generated dropdown-menus, you can do it via
                JavaScript. Considering the above HTML was inserted into the DOM, let's initialize it real quick:</p>
          
<pre><code class="language-javascript">// initialize component
var myDropdownInit = new BSN.Dropdown( '#myDropdown' );

// OR initialize component and access public method right away
var myDropdownInit = new BSN.Dropdown( '#myDropdown' ).toggle();
</code></pre>
          
              <p>Also assuming the above HTML was used for your dropdown-menu, we can also attach the original events to the
                parent of the triggering element, which is the <code>&lt;div class="dropdown"&gt;</code> element:</p>
          
<pre><code class="language-javascript">// show.bs.dropdown
myDropdown.parentNode.addEventListener('show.bs.dropdown', function(event){
  // this event can be default prevented
  // do something when the event fires
  // event.target is the PARENT of the triggering element
  // event.relatedTarget is the triggering element
}, false);

// shown.bs.dropdown
myDropdown.parentNode.addEventListener('shown.bs.dropdown', function(event){
  // do something when the event fires
  // event.target is the PARENT of the triggering element
  // event.relatedTarget is the triggering element
}, false);

// hide.bs.dropdown
myDropdown.parentNode.addEventListener('hide.bs.dropdown', function(event){
  // this event can be default prevented
  // do something when the event fires
  // event.target is the PARENT of the triggering element
}, false);

// hidden.bs.dropdown
myDropdown.parentNode.addEventListener('hidden.bs.dropdown', function(event){
  // do something when the event fires
  // event.target is the PARENT of the triggering element
}, false);
</code></pre>
              <p>When your dropdown-menus have a different structure and the <code>myDropdown.parentNode</code> is NOT the
                <code>&lt;div class="dropdown"&gt;</code> element, you might consider a
                <code>getClosest()</code> function to find it so you can then attach the original events to it.</p>
          
              <p>Now, the <b>Dropdown</b> component allows access to the isntance object, just as for all other components:</p>
          
<pre><code class="language-javascript">// reference the initialization
var myDropdownInit = BSN.Dropdown.getInstance('#myDropdown');

// use the public Methods
myDropdownInit.toggle();

// or destroy
myDropdownInit.dispose();
</code></pre>

              <p>Also you can do a simple check for the existence of <code>'Dropdown' in myDropdown</code> element to make sure
                you don't go the wrong way.</p>
            </section>
          
            <section id="dropdownExamples">
              <h3>Dropdown Examples</h3>
              <p>Right out of the box, the above dropdown template is initialized via DATA-API right away.</p>
              <div class="btn-group mb-3">
                <button class="btn btn-primary dropdown-toggle" id="myDropdown" type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                  aria-expanded="false">
                  <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                    <path d="M610.97 656.333c0 0 361.421-260.813 321.331-559.309-0.87-6.502-3.021-10.906-5.734-13.722-2.765-2.816-7.014-5.018-13.466-5.888-291.686-41.011-546.509 328.806-546.509 328.806-221.082-26.47-205.005 17.613-305.869 259.891-19.302 46.182 11.981 62.106 46.285 49.101 34.304-12.902 109.978-41.523 109.978-41.523l132.608 135.578c0 0-27.955 77.517-40.602 112.589-12.698 35.123 2.816 67.123 48.026 47.411 236.749-103.219 279.859-86.733 253.952-312.934z m51.66-302.899c-30.618-31.386-30.618-82.125 0-113.51 30.618-31.283 80.23-31.283 110.899 0 30.618 31.283 30.618 82.074 0 113.51-30.669 31.283-80.333 31.283-110.899 0z" fill="currentColor"></path>
                  </svg>
                  Dropdown trigger
                </button>
                <div class="dropdown-menu" aria-labelledby="myDropdown">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </div>

              <p>If you resize or scroll the window pushing the opened dropdown menus outside the viewport, the new automatic positioning kicks in. 
                Notice it doesn't apply any CSS styling, the component will only use the right CSS classes to display the dropdown menu in the 
                viewport, then revert to its original class if closed. The feature doesn't require Popper.js.</p>

              <div class="btn-toolbar mb-3">
                <div class="btn-group dropdown me-2">
                  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownButton4" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                      <path d="M610.97 656.333c0 0 361.421-260.813 321.331-559.309-0.87-6.502-3.021-10.906-5.734-13.722-2.765-2.816-7.014-5.018-13.466-5.888-291.686-41.011-546.509 328.806-546.509 328.806-221.082-26.47-205.005 17.613-305.869 259.891-19.302 46.182 11.981 62.106 46.285 49.101 34.304-12.902 109.978-41.523 109.978-41.523l132.608 135.578c0 0-27.955 77.517-40.602 112.589-12.698 35.123 2.816 67.123 48.026 47.411 236.749-103.219 279.859-86.733 253.952-312.934z m51.66-302.899c-30.618-31.386-30.618-82.125 0-113.51 30.618-31.283 80.23-31.283 110.899 0 30.618 31.283 30.618 82.074 0 113.51-30.669 31.283-80.333 31.283-110.899 0z" fill="currentColor"></path>
                    </svg>
                    Form
                  </button>
                  <form class="px-3 dropdown-menu form-vertical" aria-expanded="false" aria-labelledby="dropdownButton4">
                    <div class="mb-3">
                      <label for="inputEmail3" class="control-label">Email</label>
                      <div class=""><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div>
                    </div>
                    <div class="mb-3">
                      <label for="inputPassword3" class="control-label">Password</label>
                      <div class=""><input type="password" class="form-control" id="inputPassword3" placeholder="Password" autocomplete="off"></div>
                    </div>
                    <div class="mb-3">
                      <div class="">
                        <div class="checkbox"><label><input type="checkbox"> Remember me</label></div>
                      </div>
                    </div>
                    <div class="mb-3">
                      <div class="btn-group"><button type="submit" class="btn btn-secondary">Sign in</button></div>
                    </div>
                  </form>
                </div>
                <div class="btn-group dropup me-2">
                  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">                   
                    Dropup
                  </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </div>
                <div class="btn-group dropstart me-2">
                  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">                    
                    Menu Start
                  </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </div>
                <div class="btn-group dropend">
                  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    Menu End
                  </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Second action</a>
                    <a class="dropdown-item" href="#">Third action</a>
                  </div>
                </div>
              </div>

              <p>The original plugin doesn't support nesting nor recommend using it, and due to the implementation of automatic repositioning
                we decided to deprecate nesting functionality from our component.</p>

              <div class="input-group mb-3 w-50">
                <input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="Dropdown in input-group">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
                <ul class="dropdown-menu dropdown-menu-dark bg-primary dropdown-menu-end">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
              </div>
              <p>Input groups also work.</p>
              <p>Be sure to check the markup of the above examples and the original plugin <a href="https://getbootstrap.com/docs/5.0/components/dropdowns/">
                documentation page</a>.</p>
            </section>
          </section>          

          <section id="componentModal">
            <h2>Modal</h2>
            <p>The <b>Modal</b> component comes with small changes to options, events and public methods when compared to 
              the original plugin. This version is also different from our V4 version as we will explore later on.</p>
            <p>In addition to adjusting the spacing (padding) of the <code>&lt;body&gt;</code>, elements like
              <code>&lt;nav class="navbar fixed-top"&gt;</code> are also adjusted in the same manner to get the smoothest possible
              transition. Like all components of the library, the component grants access to the initialization object even if 
              your modal is automatically initialized via DATA API.</p>
            <p>While shown to the user, the component makes use of <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResiezObserver">ResizeObserver</a>
              to trigger the update of these elements and not rely on the obsolete implementation of <code>resize</code>
              event listeners.</p>

            <section id="modalOptions">
              <h3>Modal Options</h3>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Type</th>
                      <th>Default</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>backdrop</code></td>
                      <td><em>boolean</em> or the <em>string</em> <code>"static"</code></td>
                      <td><em>true</em></td>
                      <td>Includes a modal-backdrop element. Alternatively, specify <code>'static'</code> for a backdrop which
                        doesn't close the modal on click.</td>
                    </tr>
                    <tr>
                      <td><code>keyboard</code></td>
                      <td><em>boolean</em></td>
                      <td><em>true</em></td>
                      <td>Option to dismiss the current modal via <kbd>Esc</kbd> key.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>The previously featured <code>content</code> option has been deprecated. We decided to allow you to use 
                what ever manipulation method and / or sanitization you consider fit for your projects.</p>
              <p>The default options' values are same as their vanilla equivalents so you can expect the same behavior.</p>
            </section>

            <section id="modalMethods">
              <h3>Modal Methods</h3>
              <p>For full control the <b>Modal</b> component exposes a couple of public methods to be used via JavaScript.</p>

              <h4>instance.show()</h4>
              <p>The method that shows an initialized modal. When called, it will also hide any
                other visible modal before showing the one requested, making sure to keep the backdrop in place.</p>
              <h4>instance.hide()</h4>
              <p>This hides an initialized modal. Additionally it will also close (if enabled)
                the backdrop.</p>
              <h4>instance.toggle()</h4>
              <p>When called it shows the modal if hidden and hides it otherwise, using one of
                the above two methods.</p>
              <h4>instance.update()</h4>
              <p>This allows you to update the modal layout (handling overflowing/non-overflowing
                body and/or modal) after layout changes have occured.</p>
              <h4>instance.dispose()</h4>
              <p>The method that allows you to remove the modal functionality from a target element. 
                If the modal is shown, this method will close it first by calling the <code>.hide()</code>
                method before the removal of the functionality.</p>
              <h4>Modal.getInstance()</h4>
              <p>A <i>static</i> method that allows you to access a Modal instance associated to a DOM element.</p>

              <p>The previously featured <code>.setContent()</code> method has been deprecated.</p>
            </section>
            <section id="modalEvents">
              <h3>Modal Events</h3>
              <p>All original events are triggered for the <code>&lt;div class="modal"></code> element and not the 
                initialization target with its usual <code>data-bs-toggle="modal"</code> attribute.</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Event Type</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>show.bs.modal</code></td>
                      <td>This event fires immediately when the <code>.show()</code> method is called. If the called
                        came via click and the click target is a modal triggering element, that element is then marked
                        as the <code>event.relatedTarget</code> property of the event object.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>shown.bs.modal</code></td>
                      <td>This event is fired when the modal has been made visible to the user. The
                        <code>event.relatedTarget</code> is same as for the above.</td>
                    </tr>
                    <tr>
                      <td><code>hide.bs.modal</code></td>
                      <td>This event is fired immediately when the <code>.hide()</code> instance method has been called.
                        If the click event target is the <code>.btn-close</code> element, that element becomes the
                        <code>event.relatedTarget</code> of this Offcanvas event, however if the click event target is
                        the backdrop, <code>event.relatedTarget</code> will be null.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>hidden.bs.modal</code></td>
                      <td>This event is fired when the modal has finished being hidden from the user.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>If the modal is opened via JavaScript methods, or by clicking on another element that is not a modal triggering 
                element, the <code>event.relatedTarget</code> is <em>null</em>.</p>
              <p>In contrast with the original library, BSN doesn't support the <code>hidePrevented.bs.modal</code> event which
                would require adding one or more additional event listeners just to trigger this event.</p>
            </section>

            <section id="modalDATA">
              <h3 id="modalDataAPI">Modal DATA API</h3>
              <p>You can initialize <b>Modal</b> without writing any code as long as you have a modal and a trigger button with
                the <code>data-bs-target</code> attribute or a link with <code>href</code> attribute referencing that modal.
                The component will initialize all <code>&lt;div class="modal"&gt;</code> elements found in the DOM.</p>
          
<pre><code class="language-markup">&lt;!-- provide a trigger button --&gt;
&lt;button data-bs-toggle="modal" data-bs-target="#myModal" type="button"&gt;Launch modal&lt;/button&gt;

&lt;!-- Alternatively provide a link --&gt;
&lt;a data-bs-toggle="modal" href="#myModal"&gt;Launch modal&lt;/a&gt;

&lt;!-- also the modal itself --&gt;
&lt;div id="myModal" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-dialog"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header">
        &lt;h5 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h5&gt;
        &lt;button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        Some content
      &lt;/div>
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-secondary" data-bs-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;button type="button" class="btn btn-success"&gt;Save changes&lt;/button&gt;
      &lt;/div>
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

              <p>As shown in the above sample markup, <b>Modal</b> can work with multiple triggering elements as well as
                multiple dismiss elements, with minimal effort and no events overhead on the global object.</p>
            </section>
          
            <section id="modalJS">
              <h3>Modal JavaScript API</h3>
              <p>Generally you can initialize <b>Modal</b> for any instance of <code>&lt;div class="modal"&gt;</code> and
                immediately get access to methods.</p>

              <p>Let's create a very basic modal template for this guide.</p>
          
<pre><code class="language-markup">&lt;!-- blank modal template --&gt;
&lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"&gt;
  &lt;div class="modal-dialog"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;Add your header here&lt;/div&gt;
      &lt;div class="modal-body"&gt;Add your body content here here&lt;/div&gt;
      &lt;div class="modal-footer"&gt;Add your footer content here here&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
          
              <p>Next we can initialize this modal and get access to public methods right away:</p>
          
<pre><code class="language-javascript">// initialize on a &lt;div class="modal"&gt; with all options
// Note: options object is optional
var myModalInstance = new BSN.Modal(
  '#myModal', // target selector
  { // options object
    backdrop: 'static', // we don't want to dismiss Modal when Modal or backdrop is the click event target
    keyboard: false // we don't want to dismiss Modal on pressing [Esc] key
  }
);
</code></pre>

              <p>Keep in mind that re-initializing will make use of the <code>.dispose()</code> method to clear memory
                allocated for previous initialization, which involves two things: reseting the other options' values to the 
                DATA API specified, or default values AND lastly, if the modal is open, on re-initialization the modal will
                get hidden via <code>.hide()</code>, you can instantly call the <code>.show()</code> method as written above.</p>
          
              <p>Now we have an initialization reference in <code>myModalInstance</code>, we can start applying the
                component's public methods:</p>
          
<pre><code class="language-javascript">// show the modal at any time
myModalInstance.show();

// hide the modal
myModalInstance.hide();

// toggle the modal (show/hide)
myModalInstance.toggle();

// if the above method is used while modal was shown, you can then ask for a layout update
myModalInstance.update();

// when initialization is no longer needed, you can destroy it
myModalInstance.dispose();
</code></pre>
          
              <p>Any element initialized via DATA API or JavaScript, automatically grants access to the component's original events.</p>
          
<pre><code class="language-javascript">// GET THE EVENT TARGET, THE MODAL
// when we are certain which modal ID to work with
var myModal = document.getElementById('modalID');

// ATTACH listeners
// show.bs.modal event
myModal.addEventListener('show.bs.modal', function(event){
  // do something when this event triggers
  // event.target is the modal referenced in myModal
  // event.relatedTarget is the button referenced with myModalTriggerButton
}, false);

// shown.bs.modal event
myModal.addEventListener('shown.bs.modal', function(event){
  // do something when this event triggers
  // event.target is the modal referenced in myModal
  // event.relatedTarget is the button referenced with myModalTriggerButton
}, false);

// hide.bs.modal event
myModal.addEventListener('hide.bs.modal', function(event){
  // do something when this event triggers
  // event.target is the modal referenced in myModal
}, false);

// hidden.bs.modal event
myModal.addEventListener('hidden.bs.modal', function(event){
  // do something when this event triggers
  // event.target is the modal referenced in myModal
}, false);
</code></pre>
          
              <p>Additionally the component will store the initialization object in the modal, for the internal
                execution, hopefully would help you as well.</p>
          
<pre><code class="language-javascript">// you can access the initialization object from the modal itself
var myModalInit = BSN.Modal.getInstance(myModal);
</code></pre>
            </section>
          
            <section id="modalExamples">
              <h3>Modal Examples</h3>
          
              <h4>Modal Initialized via DATA API</h4>
              <p>The first example is a modal with static content initialized via DATA API, exactly as described in the above <a
                  href="#modalDATA">Use via DATA API</a> section, and showcasing the
                ability to show another modal from a modal currently visible.</p>
              <p><button id="myModalButton" type="button" class="btn btn-warning btn-lg" data-bs-toggle="modal" data-bs-target="#myModal">
                <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                  <path d="M610.97 656.333c0 0 361.421-260.813 321.331-559.309-0.87-6.502-3.021-10.906-5.734-13.722-2.765-2.816-7.014-5.018-13.466-5.888-291.686-41.011-546.509 328.806-546.509 328.806-221.082-26.47-205.005 17.613-305.869 259.891-19.302 46.182 11.981 62.106 46.285 49.101 34.304-12.902 109.978-41.523 109.978-41.523l132.608 135.578c0 0-27.955 77.517-40.602 112.589-12.698 35.123 2.816 67.123 48.026 47.411 236.749-103.219 279.859-86.733 253.952-312.934z m51.66-302.899c-30.618-31.386-30.618-82.125 0-113.51 30.618-31.283 80.23-31.283 110.899 0 30.618 31.283 30.618 82.074 0 113.51-30.669 31.283-80.333 31.283-110.899 0z" fill="currentColor"></path>
                </svg>
                 Launch simple modal</button>
              </p>
              <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header"> 
                      <h4 class="modal-title" id="myModalLabel">Modal with animation</h4>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <h4>Text in a modal</h4>
                      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                      <h4>Tooltips in a modal</h4>
                      <p><a href="#" class="tooltip-test" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#"
                          data-bs-toggle="tooltip" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.
                      </p>
                      <svg viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" class="me-1 " style="top:0; right:0"
                        data-bs-toggle="tooltip" data-bs-placement="top"
                        data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-success'&gt;SVG&lt;/span&gt;&lt;br&gt;Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">
                        <rect fill="rgba(0,0,0,0.01)" stroke="#ccc" stroke-width="1" width="100%" height="100%" rx="5"></rect>
                        <text direction="ltr" fill="#333" x="25" y="25" font-size="14">SVG</text>
                      </svg>
                      <img class="me-1 " style="top:0; right:90px" data-bs-toggle="tooltip" data-bs-placement="top"  data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-info'&gt;IMG&lt;/span&gt;&lt;br&gt;Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas." alt="Demo Tooltip for IMG" src="" />
                      
                      <svg viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" class="me-1 svg-tip-modal"
                        data-bs-toggle="tooltip" data-bs-placement="top"
                        data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-success'&gt;SVG&lt;/span&gt;&lt;br&gt;Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">
                        <rect fill="rgba(0,0,0,0.01)" stroke="#ccc" stroke-width="1" width="100%" height="100%" rx="5"></rect>
                        <text direction="ltr" fill="#333" x="25" y="25" font-size="14">SVG</text>
                      </svg>
                      <img class="me-1 img-tip-modal" data-bs-toggle="tooltip" data-bs-placement="top"  data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-info'&gt;IMG&lt;/span&gt;&lt;br&gt;Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas." alt="Demo Tooltip for IMG" src="" />

                      <h4>Popover in a modal</h4>
                      <p>This <button style="margin:-5px 0 0 0" class="btn btn-secondary popover-test"
                          data-bs-toggle="popover" data-bs-trigger="click"
                          data-bs-content="And here's some amazing content. It's very engaging. right?"
                          data-bs-title="A Title">button</button> should trigger a popover on click.</p>
                      <h4>Open modal from modal</h4>
                      <p>Click <a data-bs-toggle="modal" href="#anotherModal">here</a> to open another modal.</p>
                      <h4>Dismissing the modal is prevented!</h4>
                      <p>Try selecting this text then click outside the modal dialog, the modal dismissal will be prevented.</p>
                      <hr>
                      <h4>Overflowing text to show scroll behavior</h4>
                      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
                        quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                      <div class="btn-group">
                        <div class="dropdown">
                          <button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Share</button>
                          <div class="dropdown-menu dropdown-menu-end">
                            <a class="dropdown-item" target="_blank" rel="noreferrer" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/bootstrap.native/index.html" title="Share Native JavaScript for Bootstrap on Facebook">Facebook</a>
                            <a class="dropdown-item" target="_blank" href="https://twitter.com/intent/tweet?text=Spread the word about %23BootstrapNative by @dnp_theme and download here http://thednp.github.io/bootstrap.native/index.html" title="Share Bootstrap Native on Twitter">
                              Twitter
                            </a>
                          </div>
                        </div>
                      </div>
                      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                        laoreet rutrum faucibus dolor auctor.</p>  
                      <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                        consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
                        quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                        laoreet rutrum faucibus dolor auctor.</p>
                      <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                        consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
                        quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                        laoreet rutrum faucibus dolor auctor.</p>
                      <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                        consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </div>
                    <div class="modal-footer">
                      <button id="anotherModalButton" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#anotherModal">Next</button>
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                          <path d="M610.97 656.333c0 0 361.421-260.813 321.331-559.309-0.87-6.502-3.021-10.906-5.734-13.722-2.765-2.816-7.014-5.018-13.466-5.888-291.686-41.011-546.509 328.806-546.509 328.806-221.082-26.47-205.005 17.613-305.869 259.891-19.302 46.182 11.981 62.106 46.285 49.101 34.304-12.902 109.978-41.523 109.978-41.523l132.608 135.578c0 0-27.955 77.517-40.602 112.589-12.698 35.123 2.816 67.123 48.026 47.411 236.749-103.219 279.859-86.733 253.952-312.934z m51.66-302.899c-30.618-31.386-30.618-82.125 0-113.51 30.618-31.283 80.23-31.283 110.899 0 30.618 31.283 30.618 82.074 0 113.51-30.669 31.283-80.333 31.283-110.899 0z" fill="currentColor"></path>
                        </svg>
                        Close
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div id="anotherModal" class="modal" role="dialog" aria-labelledby="anotherModalLabel" aria-hidden="true" data-bs-backdrop="false">
                <div class="modal-dialog modal-dialog-scrollable">
                  <div class="modal-content">
                    <div class="modal-header"> 
                      <h4 class="modal-title" id="anotherModalLabel">Scrollable Not Animated Modal</h4>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <h4>Linked Modal</h4>
                      <p class="lead">This modal was opened from another modal</p>
                      <p>This <b>Modal</b> uses <code>data-bs-backdrop="false"</code> intentionally to test the option independently for each instance.</p>
                      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
                        quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                      <p>This modal uses <code>.modal-dialog-scrollable</code></p>
                      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                        laoreet rutrum faucibus dolor auctor.</p>
                      <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                        consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                        laoreet rutrum faucibus dolor auctor.</p>
                      <h4>Open an Offcanvas instance</h4>
                      <p class="lead">The following button will close this modal and open an offcanvas instance.</p>

                      <button data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" class="btn btn-primary">Open Offcanvas</button>
                      <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                        consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
                        quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                        laoreet rutrum faucibus dolor auctor.</p>
                      <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                        consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </div>
                    <div class="modal-footer">
                      <button data-bs-toggle="modal" data-bs-target="#myModal" type="button" class="btn btn-primary">Back</button>
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
          
              <h4>Modal Initialized via JavaScript API</h4>
              <p>The following example is focused on initialization via JavaScript, without a triggering button:</p>
          
<pre><code class="language-javascript">// we grab a modal by ID
var myModal = document.getElementById('myModal');

// we grab some button by ID, we will use it later
var btnModal = document.getElementById('openModalViaJS');
// this button IS NOT a triggering element, it has no reference to the above modal

// initialize Modal for this triggering element
var modalInitJS = new BSN.Modal(myModal, {
  backdrop: 'static'
});

// OR initialize with no options provided
// the options object is optional
var modalInitJS = new BSN.Modal(myModal);

// when we click btnModal, open the modal
btnModal.addEventListener('click', function(e){
  modalInitJS.show();
}, false)

// BONUS
// since there is no triggering element, you might need
// access to the initialization object from another application
var findModalInitJS = BSN.Modal.getInstance(myModal);
</code></pre>
          
              <p><button id="openModalViaJS" type="button" class="btn btn-secondary btn-lg">Open Modal</button></p>
              <p>As explained in the sample code above, this modal is completely independent from a triggering button which would
                usually have the <code>data-bs-toggle="modal"</code> and <code>data-bs-target="#myModal"</code> attributes
                necesary to connect with our modal via DATA API.</p>
          
              <div id="myModalJS" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalJSLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 class="modal-title" id="myModalJSLabel">Static modal initialized via JavaScript</h4>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <p>This is a damn awesome modal content template configured via Javascript, using the specific modal events like <code>show.bs.modal</code>, so please open your console and check the log entries.</p>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </section>

          <section id="componentOffcanvas">
            <h2>Offcanvas</h2>
            <p>The <b>Offcanvas</b> component is our newest addition and comes packed with options, events and public methods.</p>
            <p>Similar to our <b>Modal</b>, this component can also adjust the spacing (padding) of the <code>&lt;body&gt;</code>,
              and all elements like <code>&lt;nav class="navbar fixed-top"&gt;</code> to get the smoothest possible transition.</p>

            <section id="offcanvasOptions">
              <h3>Offcanvas Options</h3>

              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Type</th>
                      <th>Default</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>backdrop</code></td>
                      <td><em>boolean</em><br><em>"static"</em></td>
                      <td><em>true</em></td>
                      <td>Option to add a backdrop on the body when offcanvas element is shown. Alternatively, specify <code>"static"</code>
                        for a backdrop which doesn't close the offcanvas on click.</td>
                    </tr>
                    <tr>
                      <td><code>keyboard</code></td>
                      <td><em>boolean</em></td>
                      <td><em>true</em></td>
                      <td>Option to dismiss the current offcanvas via <kbd>Esc</kbd> key.</td>
                    </tr>
                    <tr>
                      <td><code>scroll</code></td>
                      <td><em>boolean</em></td>
                      <td><em>false</em></td>
                      <td>Option to allow body scrolling while offcanvas is open.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>

            <section id="offcanvasMethods">
              <h3>Offcanvas Methods</h3>
              <p>For full control the <b>Offcanvas</b> component exposes a couple of public methods to be used via JavaScript :</p>

              <h4>instance.show()</h4>
              <p>The method that shows an initialized offcanvas. When called, it will also hide any
                other visible offcanvas before showing the one requested, making sure to keep track on
                the backdrop for each offcanvas instance.</p>
              <h4>instance.hide()</h4>
              <p>This hides an initialized offcanvas. Additionally it will also remove (if enabled)
                the backdrop.</p>
              <h4>instance.toggle()</h4>
              <p>When called it shows the offcanvas if hidden and hides it otherwise, using one of
                the above two methods.</p>
              <h4>instance.update()</h4>
              <p>This allows you to update the offcanvas layout (handling overflowing/non-overflowing
                body and/or offcanvas) after you have changed it's content or other layout changes occured.</p>
              <h4>instance.dispose()</h4>
              <p>The method that allows you to remove the offcanvas functionality from a target element. 
                If the offcanvas is shown, this method will close it first by calling the <code>.hide()</code>
                method before the removal of the functionality.</p>
              <h4>Offcanvas.getInstance()</h4>
              <p>A <i>static</i> method that allows you to access a Offcanvas instance associated to a DOM element.</p>

            </section>

            <section id="offcanvasEvents">
              <h3>Offcanvas Events</h3>
              <p>All original events are triggered for the <code>&lt;div class="offcanvas"></code> element.</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Event Type</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>show.bs.offcanvas</code></td>
                      <td>This event fires immediately when the <code>.show()</code> method is called. If the call
                        came via click and the click target is an offcanvas trigger element, that element
                        is then assigned as the <code>event.relatedTarget</code> property of the event object.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>shown.bs.offcanvas</code></td>
                      <td>This event is fired when the offcanvas has been made visible to the user. The
                        <code>event.relatedTarget</code> is same as for the above.</td>
                    </tr>
                    <tr>
                      <td><code>hide.bs.offcanvas</code></td>
                      <td>This event is fired immediately when the <code>.hide()</code> instance method has been called.
                        If the method is call came via click and the click target is a dismiss element, that element is 
                        then assigned as the <code>event.relatedTarget</code> of this event. If the click event target
                        is the backdrop, <code>event.relatedTarget</code> is null.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>hidden.bs.offcanvas</code></td>
                      <td>This event is fired when the offcanvas has finished being hidden from the user. This event
                        inherits the <code>event.relatedTarget</code> from the above event.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>Similar to the Modal component, if the offcanvas is opened/closed via JavaScript methods, or is dismissed
                by clicking on another element outside the offcanvas, the <code>event.relatedTarget</code> is <em>null</em>.
                Also the Offcanvas component doesn't support the <code>hidePrevented.bs.offcanvas</code> event for the exact
                same reason as for the Modal component.</p>
            </section>
            <section id="offcanvasDATA">
              <h3 id="offcanvasDataAPI">Offcanvas DATA API</h3>
              <p>You can initialize <b>Offcanvas</b> without writing any code as long as you have an offcanvas and a trigger button
                with the <code>data-bs-target</code> attribute or a link with <code>href</code> referencing that offcanvas.
                The component will initialize all <code>&lt;div class="offcanvas"&gt;</code> elements found in the DOM.</p>
          
<pre><code class="language-markup">&lt;!-- provide a trigger button --&gt;
&lt;button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
&lt;/button&gt;

&lt;!-- or an anchor link --&gt;
&lt;a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample"&gt;
  Link with href
&lt;/a&gt;

&lt;!-- also the offcanvas itself --&gt;
&lt;div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"&gt;
  &lt;div class="offcanvas-header"&gt;
    &lt;h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas&lt;/h5&gt;
    &lt;button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="offcanvas-body"&gt;
    &lt;p>Some text here should work.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
          
            </section>
          
            <section id="offcanvasJS">
              <h3>Offcanvas JavaScript API</h3>
              <p>Generally you can initialize <b>Offcanvas</b> for any instance of <code>&lt;div class="offcanvas"&gt;</code> and
                immediately get access to methods. Similar to our <b>Modal</b>, this component can also work with multiple
                triggering button elements having the <code>data-bs-toggle="offcanvas"</code> attribute.</p>
          
              <p>Considering the sample markup showcased in the above section, we can now initialize this offcanvas and get
                access to public methods right away:</p>
          
<pre><code class="language-javascript">// initialize on a &lt;div class="offcanvas"&gt; with all options
var myOffcanvasInstance = new BSN.Offcanvas(
  '#myOffcanvas', // target selector
  { // options object
    backdrop: false, // we don't want to use the backdrop
    keyboard: false, // we don't want to dismiss Offcanvas on pressing [Esc] key
    scroll: true // we allow the user to scroll the page
  }
);
</code></pre>
          
              <p>Now we have an initialization reference in <code>myOffcanvasInstance</code>, we can start calling
                the component's public methods:</p>
          
<pre><code class="language-javascript">// show the offcanvas at any time
myOffcanvasInstance.show();

// hide the offcanvas
myOffcanvasInstance.hide();

// toggle the offcanvas (show/hide)
myOffcanvasInstance.toggle();

// if the above method is used while offcanvas was shown, you can then ask for a layout update
myOffcanvasInstance.update();

// when initialization is no longer needed, you can destroy it
myOffcanvasInstance.dispose();
</code></pre>
          
              <p>Any element initialized via DATA API or JavaScript, automatically grants access to the component's original events.</p>
          
<pre><code class="language-javascript">// GET THE EVENT TARGET
// when we are certain which offcanvas ID to work with
var myOffcanvas = document.getElementById('offcanvasID');

// ATTACH listeners
// show.bs.offcanvas event
myOffcanvas.addEventListener('show.bs.offcanvas', function(event){
  // do something when this event triggers
  // event.target is the offcanvas referenced in myOffcanvas
  // event.relatedTarget can be the triggering button or NULL
}, false);

// shown.bs.offcanvas event
myOffcanvas.addEventListener('shown.bs.offcanvas', function(event){
  // do something when this event triggers
  // event.target is the offcanvas referenced in myOffcanvas
  // event.relatedTarget can be the triggering button or NULL
}, false);

// hide.bs.offcanvas event
myOffcanvas.addEventListener('hide.bs.offcanvas', function(event){
  // do something when this event triggers
  // event.target is the offcanvas referenced in myOffcanvas
  // event.relatedTarget can be the triggering/dismiss button or NULL
}, false);

// hidden.bs.offcanvas event
myOffcanvas.addEventListener('hidden.bs.offcanvas', function(event){
  // do something when this event triggers
  // event.target is the offcanvas referenced in myOffcanvas
  // event.relatedTarget can be the triggering/dismiss button or NULL
}, false);
</code></pre>
          
              <p>Additionally the component will store the initialization object in the offcanvas, for the internal
                execution, hopefully would help you as well.</p>
          
<pre><code class="language-javascript">// you can access the initialization object from the offcanvas itself
var myOffcanvasInit = BSN.Offcanvas.getInstance(myOffcanvas);
</code></pre>

            </section>
          
            <section id="offcanvasExamples">
              <h3>Offcanvas Examples</h3>

              <p>These examples are all initialized via DATA API, exactly as described in the above <a href="#offcanvasDATA">Use via DATA API</a> 
                section, and showcasing the ability to show another offcanvas from an offcanvas currently visible.</p>

              <div class="btn-toolbar mb-3">
                <a class="btn btn-primary me-1" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
                  <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                    <path d="M610.97 656.333c0 0 361.421-260.813 321.331-559.309-0.87-6.502-3.021-10.906-5.734-13.722-2.765-2.816-7.014-5.018-13.466-5.888-291.686-41.011-546.509 328.806-546.509 328.806-221.082-26.47-205.005 17.613-305.869 259.891-19.302 46.182 11.981 62.106 46.285 49.101 34.304-12.902 109.978-41.523 109.978-41.523l132.608 135.578c0 0-27.955 77.517-40.602 112.589-12.698 35.123 2.816 67.123 48.026 47.411 236.749-103.219 279.859-86.733 253.952-312.934z m51.66-302.899c-30.618-31.386-30.618-82.125 0-113.51 30.618-31.283 80.23-31.283 110.899 0 30.618 31.283 30.618 82.074 0 113.51-30.669 31.283-80.333 31.283-110.899 0z" fill="currentColor"></path>
                  </svg>
                  Link with href
                </a>
                <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                  Button with data-bs-target
                </button>
              </div>
              
              <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
                <div class="offcanvas-header">
                  <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
                  <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                  <p>This <b>Offcanvas</b> instance has its specific events attached. Check the console for logs.</p>
                  <p>Opening another <b>Offcanvas</b> instance will close this <b>Offcanvas</b> instance.</p>
                  <div class="btn-toolbar mt-3">
                    <button class="btn btn-primary me-1 mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNoBackdrop" aria-controls="offcanvasNoBackdrop">
                      Open Offcanvas
                    </button>
                    <svg viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" class="me-1 mb-1"
                      data-bs-toggle="tooltip" data-bs-placement="top"
                      data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-success'&gt;SVG&lt;/span&gt;&lt;br&gt;Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">
                      <rect fill="rgba(0,0,0,0.01)" stroke="#ccc" stroke-width="1" width="100%" height="100%" rx="5"></rect>
                      <text direction="ltr" fill="#333" x="25" y="25" font-size="14">SVG</text>
                    </svg>
                    <img class="me-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="top"  data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-info'&gt;IMG&lt;/span&gt;&lt;br&gt;Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas." alt="Demo Tooltip for IMG" src="" />
                    <button type="button" class="btn btn-secondary mb-1" data-bs-toggle="popover" data-bs-trigger="click"
                      data-bs-content="Closing this offcanvas will also close this popover.">Popover</button>
                  </div>
                </div>
              </div>

              <div class="btn-toolbar gap-1 mb-3">
                <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">
                  <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                    <path d="M610.97 656.333c0 0 361.421-260.813 321.331-559.309-0.87-6.502-3.021-10.906-5.734-13.722-2.765-2.816-7.014-5.018-13.466-5.888-291.686-41.011-546.509 328.806-546.509 328.806-221.082-26.47-205.005 17.613-305.869 259.891-19.302 46.182 11.981 62.106 46.285 49.101 34.304-12.902 109.978-41.523 109.978-41.523l132.608 135.578c0 0-27.955 77.517-40.602 112.589-12.698 35.123 2.816 67.123 48.026 47.411 236.749-103.219 279.859-86.733 253.952-312.934z m51.66-302.899c-30.618-31.386-30.618-82.125 0-113.51 30.618-31.283 80.23-31.283 110.899 0 30.618 31.283 30.618 82.074 0 113.51-30.669 31.283-80.333 31.283-110.899 0z" fill="currentColor"></path>
                  </svg>
                  Scroll
                </button>
                <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNoBackdrop" aria-controls="offcanvasNoBackdrop">No Backdrop</button>
                <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTopWithBackdrop" aria-controls="offcanvasTopWithBackdrop">Backdrop Top</button>
                <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Scrolling & backdrop</button>
              </div>

              <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
                <div class="offcanvas-header">
                  <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with scrolling</h5>
                  <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                  <p>Try scrolling the rest of the page to see this option in action.</p>
                  <div class="btn-toolbar gap-1">
                    <svg viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" class=""
                      data-bs-toggle="tooltip" data-bs-placement="top"
                      data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-success'&gt;SVG&lt;/span&gt;&lt;br&gt;Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">
                      <rect fill="rgba(0,0,0,0.01)" stroke="#ccc" stroke-width="1" width="100%" height="100%" rx="5"></rect>
                      <text direction="ltr" fill="#333" x="25" y="25" font-size="14">SVG</text>
                    </svg>
                    <img class="" data-bs-toggle="tooltip" data-bs-placement="top"  data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-info'&gt;IMG&lt;/span&gt;&lt;br&gt;Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas." alt="Demo Tooltip for IMG" src="" />
                    <button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-trigger="click"
                      data-bs-content="Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">Popover</button>
                  </div>
                </div>
              </div>

              <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTopWithBackdrop" aria-labelledby="offcanvasTopWithBackdropLabel"  data-bs-backdrop="static">
                <div class="offcanvas-header">
                  <h5 class="offcanvas-title" id="offcanvasTopWithBackdropLabel">Offcanvas Top</h5>
                  <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                  <p>This offcanvas instance uses "static" backdrop.</p>
                  <div class="btn-toolbar gap-1">
                    <svg viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" class=""
                      data-bs-toggle="tooltip" data-bs-placement="top"
                      data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-success'&gt;SVG&lt;/span&gt;&lt;br&gt;Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">
                      <rect fill="rgba(0,0,0,0.01)" stroke="#ccc" stroke-width="1" width="100%" height="100%" rx="5"></rect>
                      <text direction="ltr" fill="#333" x="25" y="25" font-size="14">SVG</text>
                    </svg>
                    <img class="" data-bs-toggle="tooltip" data-bs-placement="top"  data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-info'&gt;IMG&lt;/span&gt;&lt;br&gt;Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas." alt="Demo Tooltip for IMG" src="" />
                    <button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-trigger="click"
                      data-bs-content="Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">Popover</button>
                  </div>
                </div>
              </div>
              <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNoBackdrop" aria-labelledby="offcanvasNoBackdropLabel" data-bs-backdrop="false">
                <div class="offcanvas-header">
                  <h5 class="offcanvas-title" id="offcanvasNoBackdropLabel">Offcanvas with Modal</h5>
                  <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                  <p>Opening a <b>Modal</b> instance will close this <b>Offcanvas</b> instance.</p>
                  <p>This <b>Offcanvas</b> uses <code>data-bs-backdrop="false"</code> intentionally to test the option independently for each instance.</p>
                  <div class="btn-toolbar gap-1">
                    <a class="btn btn-primary" href="#myModal" data-bs-toggle="modal">Open Modal</a>
                    <svg viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" class=""
                      data-bs-toggle="tooltip" data-bs-placement="top"
                      data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-success'&gt;SVG&lt;/span&gt;&lt;br&gt;Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">
                      <rect fill="rgba(0,0,0,0.01)" stroke="#ccc" stroke-width="1" width="100%" height="100%" rx="5"></rect>
                      <text direction="ltr" fill="#333" x="25" y="25" font-size="14">SVG</text>
                    </svg>
                    <img class="" data-bs-toggle="tooltip" data-bs-placement="top"  data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-info'&gt;IMG&lt;/span&gt;&lt;br&gt;Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas." alt="Demo Tooltip for IMG" src="" />
                    <button type="button" class="btn btn-secondary mb-1" data-bs-toggle="popover" data-bs-trigger="click"
                      data-bs-content="Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">Popover</button>
                  </div>

                </div>
              </div>
              <div class="offcanvas offcanvas-bottom" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
                <div class="offcanvas-header">
                  <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
                  <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                  <p>Try scrolling the rest of the page to see this option in action.</p>
                  <div class="btn-toolbar">
                    <svg viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" class="me-1 mb-1"
                      data-bs-toggle="tooltip" data-bs-placement="top"
                      data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-success'&gt;SVG&lt;/span&gt;&lt;br&gt;Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">
                      <rect fill="rgba(0,0,0,0.01)" stroke="#ccc" stroke-width="1" width="100%" height="100%" rx="5"></rect>
                      <text direction="ltr" fill="#333" x="25" y="25" font-size="14">SVG</text>
                    </svg>
                    <img class="me-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="top"  data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-info'&gt;IMG&lt;/span&gt;&lt;br&gt;Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas." alt="Demo Tooltip for IMG" src="" />
                    <button type="button" class="btn btn-secondary me-1 mb-1" data-bs-toggle="popover" data-bs-trigger="click"
                      data-bs-content="Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">Popover</button>
                  </div>
                </div>
              </div>
            </section>
          </section>
          
          <section id="componentPopover">
            <h2>Popover</h2>
            <p>The <b>Popover</b> component will initialize all elements with the <code>data-bs-toggle="popover"</code> attribute. 
              Unlike our previous versions, this component now extends the <b><a href="#tooltipComponent">Tooltip</a></b> component
              since both share the same utilities and functionality except that <b>Popover</b> has a different template and the
              ability to change how events are handled via <a href="#popoverOptions">additional options</a>.</p>
            <p>Our implementation can automatically reposition your popovers when showing them to the user, as well as when 
              a popover is visible and layout changes, our new <a href="https://github.com/thednp/position-observer">PositionObserver</a>
              will trigger the update instead of the previously implemented <code>resize</code> and <code>scroll</code> event listeners.</p>
            <p>On that note, Popover makes use of some <a rel="noreferrer" href="https://floating-ui.com/" target="_blank">floating-ui</a> 
              functionality which have been <a href="https://github.com/thednp/bootstrap.native/issues/158">gradually implemented</a> 
              into our component to always provide an accurate popover position.</p>
            <p>The <b>Popover</b> implements a special <a href="https://github.com/thednp/shorter-js/blob/master/src/misc/timer.js">
              lock mechanism</a> to make it virtually impossible to break if the user decides to spam trigger events.</p>
            <section id="popoverOptions">
              <h3>Popover Options</h3>
              <p>The component covers all needed options, including those for a template system:</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Type</th>
                      <th>Default</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>animation</code></td>
                      <td><em>boolean</em></td>
                      <td><em>true</em></td>
                      <td>Option to enable/disable the popover animation. If you disable the animation, you can do that via the
                        <code>data-bs-animation="false"</code> attribute. When enabled, this option will add an additional CSS class
                        <code>fade</code> to the popover to enable the transition.</td>
                    </tr>
                    <tr>
                      <td><code>btnClose</code></td>
                      <td><em>string</em><br><em>HTMLElement</em></td>
                      <td><em>markup</em> (see description)</td>
                      <td>Option to set a custom close button for dismissible popovers. This option is useful for labelling the button for WAI-ARIA
                        compliant and multi-language applications as well as for using custom icons. The default button markup is:<br>
                        <code>&lt;button class="btn-close" aria-label="Close"&gt;&lt;/button&gt;</code><br>
                        This option allows you to set an <code>HTMLElement</code> to be cloned and used as the <code>dismiss</code> button.<br>
                        <b>This option is JavaScript API only.</b></td>
                    </tr>
                    <tr>
                      <td><code>content</code></td>
                      <td><em>string</em><br><em>HTMLElement</em></td>
                      <td></td>
                      <td>Option to set the <b>content</b> of the popover via JavaScript or the <code>data-bs-content="CONTENT"</code> 
                        attribute. You can also specify a DOM node to serve as your popover content. This option is <b>required</b> via
                        DATA API initialization or JavaScript initialization in order to validate.<br>
                        This option allows you to set an <code>HTMLElement</code> to be cloned and used as the <code>content</code> filler for your Popover.
                      </td>
                    </tr>
                    <tr>
                      <td><code>customClass</code></td>
                      <td><em>string</em></td>
                      <td></td>
                      <td>Option to customize the popover by adding a custom CSS class. You can set this option via the 
                        <code>data-bs-custom-class="my-class"</code> attribute.</td>
                    </tr>
                    <tr>
                      <td><code>delay</code></td>
                      <td><em>number</em></td>
                      <td><em>200</em></td>
                      <td>A short delay before hiding the popover.<br> Can be set via JavaScript or the
                        <code>data-bs-delay="DELAY"</code> attribute.</td>
                    </tr>
                    <tr>
                      <td><code>dismissible</code></td>
                      <td><em>boolean</em></td>
                      <td><em>false</em></td>
                      <td>Option to make the popover dismissible. When <code>true</code>, it will also add an <kbd>&times;</kbd> button at
                      the top-right of the popover. You can enable this option via JavaScript API or the <code>data-bs-dismissible="true"</code> 
                      attribute.</td>
                    </tr>
                    <tr>
                      <td><code>placement</code></td>
                      <td><em>string</em></td>
                      <td><em>top</em></td>
                      <td>Option to set a specific placement to <code>top</code>, <code>bottom</code>, <code>left</code> or
                        <code>right</code>, relative to it's target. Can be set via both JavaScript and the
                        <code>data-bs-placement="POSITION"</code> attribute.</td>
                    </tr>
                    <tr>
                      <td><code>sanitizeFn</code></td>
                      <td><em>function</em></td>
                      <td><em>null</em></td>
                      <td>Option to set a function that will sanitize the <code>title</code>, <code>content</code>, <code>template</code> and 
                        the dismissing <code>&lt;button class=btn-close"&gt;</code> element. Our library doesn't include any sanitization 
                        function, you are free to use whatever solution suits your need.<br><b>This option is JavaScript API only.</b></td>
                    </tr>
                    <tr>
                      <td><code>template</code></td>
                      <td><em>string</em></td>
                      <td><em>markup</em> (see description)</td>
                      <td>Option to use a custom HTML template for your popover initialization. You can also specify a DOM node to serve as your template.
                        The following markup is the default template:<br>
<code>'&lt;div class="popover" role="tooltip"&gt;<br>
&nbsp;  &lt;div class="popover-arrow">&lt;/div&gt;<br>
&nbsp;  &lt;h3 class="popover-header">&lt;/h3&gt;<br>
&nbsp;  &lt;div class="popover-body">&lt;/div&gt;<br>
&lt;/div&gt;'</code><br>
                        The contents from the <code>title</code> option or the <code>data-bs-title</code> attribute will fill in the template's 
                        <code>.popover-header</code> element, while the contents of the <code>data-bs-content</code> attribute will fill in 
                        the <code>.popover-body</code> element.<br>
                        This option allows you to set an <code>HTMLElement</code> to be cloned and used as the <code>template</code> for your Popover.<br>
                        <b>This option is JavaScript API only.</b></td>
                    </tr>
                    <tr>
                      <td><code>title</code></td>
                      <td><em>string</em> | <em>HTMLElement</em></td>
                      <td></td>
                      <td>Option to set the <b>title</b> of the popover via JavaScript or the <code>data-bs-title="TITLE"</code>
                        attribute. You can also specify a DOM node to serve as your popover title.<br>
                        This option allows you to set an <code>HTMLElement</code> to be cloned and used as the <code>title</code> filler for your Popover.<br>
                      </td>
                    </tr>
                    <tr>
                      <td><code>trigger</code></td>
                      <td><em>string</em></td>
                      <td><em>hover focus</em></td>
                      <td>Option to change the component's trigger event: <code>manual</code>, <code>hover</code>, <code>focus</code>,
                        <code>click</code> or any combination separated via space, except that <code>manual</code> cannot be combined.<br>
                        * <code>manual</code> - makes the popover get shown/hidden only via the <code>.show()</code>, <code>.hide()</code> or
                        <code>.toggle()</code> methods, programmed by the developer with own scripting;<br>
                        * <code>click</code> - will toggle the popover visibility when <code>click</code> event is triggered by the user,
                        however when the above option <code>dismissible</code> is true, the user can only dismiss the popover by clicking the
                        <code>&lt;button class="btn-close"&gt;</code> element.<br>
                        * <code>hover</code> - will attach <code>mouseenter</code> and <code>mouseleave</code> event listeners to show / hide
                        the popover with a similar interaction when <code>dismissible</code> option is true;<br>
                        * <code>focus</code> - will attach <code>focusin</code> and <code>focusout</code> event listeners to show / hide the
                        popover, also taking into account the <code>dismissible</code> option; in some cases you may want to open a popover
                        only on focus for form elements or click for other <code>HTMLElement</code> items.<br>
                        You can set this option value via JavaScript or the <code>data-bs-trigger="EVENT(S)"</code> attribute.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>The <b>Popover</b> component no longer requires the <code>container</code> option</p>

              <p>If a proper <code>template</code> is not specified via JavaScript or the <code>content</code> option is not set
                in any way, the <b>Popover</b> will not be initialized for that specific element.</p>
              <p>When your popover title and/or content are HTML markup strings, remember to 
                <a href="https://www.npmjs.com/package/sanitizer">sanitize the content</a> of the markup.</p>
            </section>
          
            <section id="popoverMethods">
              <h3>Popover Methods</h3>
              <p>For full control the <b>Popover</b> component exposes a couple of public methods to be used via JavaScript.</p>

              <h4>instance.show()</h4>
              <p>The method shows an initialized popover. When the method is called, it will
                always <b>create</b> a new popover and append it into your designated container.</p>
              <h4>instance.hide()</h4>
              <p>The method hides an initialized popover and remove it from its container and
                also from the memory, as if you would automatically <em>destroy</em> it.</p>
              <h4>instance.toggle()</h4>
              <p>The method shows the popover if hidden and hides it otherwise, using the above
                two methods.</p>
              <h4>instance.enable()</h4>
              <p>Starts showing the popover again to the user. Popovers are <b>enabled by default</b>.</p>
              <h4>instance.disable()</h4>
              <p>Stops showing the popover to the user.</p>
              <h4>instance.toggleEnabled()</h4>
              <p>Toggles the enabled state by calling one of the two methods above.</p>
              <h4>instance.update()</h4>
              <p>Updates the position of the popover.</p>
              <h4>instance.handleTouch()</h4>
              <p>The event listener for touch enabled devices.</p>
              <h4>instance.dispose()</h4>
              <p>Removes the component from target element.</p>
              <h4>Popover.getInstance()</h4>
              <p>A <i>static</i> method that allows you to access a Popover instance associated to a DOM element.</p>
            </section>
          
            <section id="popoverEvents">
              <h3>Popover Events</h3>
              <p>The component's original events are same as with the original jQuery Plugin, except
                <code>inserted.bs.popover</code>, just as explained for the <b>Tooltip</b> component.</p>
              <p>The <code>event.target</code> of the original events is the the initialization target with the
              <code>data-bs-toggle="popover"</code> attribute.</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Event Type</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>show.bs.popover</code></td>
                      <td>This event fires immediately when the <code>show</code> instance method is called.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>shown.bs.popover</code></td>
                      <td>This event is fired when the popover has been made visible to the user.</td>
                    </tr>
                    <tr>
                      <td><code>hide.bs.popover</code></td>
                      <td>This event is fired immediately when the <code>hide</code> instance method has been called.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>hidden.bs.popover</code></td>
                      <td>This event is fired when the popover has finished being hidden from the user.</td>
                    </tr>
                    <tr>
                      <td><code>updated.bs.popover</code></td>
                      <td>This event is fired after the popover has updated it's position.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          
            <section id="popoverDATA">
              <h3>Popover DATA API</h3>
              <p>Our component will initialize any element found to have the <code>data-bs-toggle="popover"</code> attribute and at
                least the <code>data-bs-content</code> attribute.</p>
          
<pre><code class="language-markup">&lt;!-- any regular link with data-bs-toggle="popover" --&gt;
&lt;a href="https://google.com" data-bs-title="Google" data-bs-content="Google is cool" data-bs-toggle="popover"&gt;Google&lt;/a&gt;

&lt;!-- any SVG shape with data-bs-toggle="popover" --&gt;
&lt;svg viewBox="0 0 80 34" width="80" height="34" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;rect data-bs-toggle="popover" data-bs-placement="top" data-bs-delay="150" data-bs-content="Demo Title for SVG" rx="5">&lt;/rect&gt;
&lt;/svg&gt;
</code></pre>

            </section>

            <section id="popoverJS">
              <h3>Popover JavaScript API</h3>
              <p>After inserting new content into the page, you can initialize any element with <b>Popover</b> via JavaScript. You
                can also initialize for elements not having the specific DATA API. You can do the following:</p>

<pre><code class="language-javascript">// find all elements with data-bs-content attribute
var popoverTargets = document.querySelectorAll('[data-bs-content]'); // also a certain class would go fine

// initialize Popover for each element
Array.from(popoverTargets).forEach(
  popTarget => new BSN.Popover( popTarget, {
    placement: 'top', // string
    animation: true, // boolean
    customClass: 'my-special-class', // string
    delay: 100, // integer
    dismissible: true, // boolean
    btnClose: '&lt;button class="btn-close" aria-label="Close"&gt;&lt;/button&gt;', // string
    sanitizeFn: function(dirty){ // use sanitizer of your choice here
      return DOMPurify.sanitize(dirty);
    }    
  })
);
</code></pre>
          
              <p>In addition, similar to any other component of this library, you can access the initialization and the public
                methods even for elements initialized via DATA API.</p>
          
<pre><code class="language-javascript">// find an element initialized with Popover
var myLinkWithPopover = document.getElementById('myLinkWithPopover');

// reference the initialization object
var myPopoverInit = BSN.Popover.getInstance(myLinkWithPopover);
</code></pre>

              <p>Just because you can, you can re-initialize any element on the fly, to change options or to just call the
                <code>.show()</code> method.</p>

<pre><code class="language-javascript">// re-initialize Popover and call .show()
new BSN.Popover('#selector',options).show();
</code></pre>
          
              <p>Considering the just above element, let's go ahead and put the component's events to use:</p>
          
<pre><code class="language-javascript">// show.bs.popover
myLinkWithPopover.addEventListener('show.bs.popover', function(event){
  // do some cool stuff when .show() method is called
  // event.target is myLinkWithPopover
}, false);

// shown.bs.popover
myLinkWithPopover.addEventListener('shown.bs.popover', function(event){
  // do some cool stuff when .show() method completed
  // event.target is myLinkWithPopover
}, false);

// hide.bs.popover
myLinkWithPopover.addEventListener('hide.bs.popover', function(event){
  // do some cool stuff when .hide() method is called
  // event.target is myLinkWithPopover
}, false);

// hidden.bs.popover
myLinkWithPopover.addEventListener('hidden.bs.popover', function(event){
  // do some cool stuff when .hide() method completed
  // event.target is myLinkWithPopover
}, false);
</code></pre>
          
              <p>To use the template system, you can do the following:</p>
          
<pre><code class="language-javascript">// initialize Popover with a custom template
var popover2 = new BSN.Popover('.popover-via-template', { // where .popover-via-template is the text input
  title: 'Sample title', // string
  content: '&lt;p&gt;Some sample message.&lt;/p&gt;', // string
  trigger: 'focus', // string
  sanitizeFn: yourUtilityOfChoice, // function
  template: '&lt;div class="popover custom-class" role="tooltip"&gt;'
  + '&lt;div class="arrow"&gt;&lt;/div&gt;'
  + '&lt;h3 class="popover-header"&gt;&lt;/h3&gt;'
  + '&lt;div class="popover-body"&gt;&lt;/div&gt;'
  + '&lt;/div&gt;'
});
</code></pre>
          
            </section>
          
            <section id="popoverExamples">
              <h3>Popover Examples</h3>
              <p>First let's test all the placement positions, we start with inline links having the <a href="#"
                  data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Testing bottom placement">bottom</a>
                placement, then <a href="#" data-bs-toggle="popover" data-bs-placement="left"
                  data-bs-content="Testing left placement">left</a>, and
                <a href="#" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Testing right placement">right</a>.</p>
              <p>Now we are going to test buttons with a popover with large contents. The last two examples below are using the
                template system and different trigger options. The popover generated for the last two
                examples can be dismissed on window resize or blur (focus out).</p>

              <template id="sample-ce">
                <link rel="stylesheet" src="./assets/css/custom-elements.css" />
                <slot name="button"></slot>
              </template>
                
              <div class="btn-toolbar mb-3">
                <ce-tip type="popover" class="me-1 mb-1 d-inline-flex">
                  <link rel="stylesheet" href="./assets/css/custom-elements.css">
                  <button slot="button" aria-label="Popover CustomElement Test" class="btn btn-popover"
                    data-bs-toggle="popover" 
                    data-bs-title="Custom Element Popover" 
                    data-bs-content="This is a CustomElement Popover example initialized automatically via data attributes.">
                    CustomElement
                    <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 1024 1024"><path d="M366 698l196-196-196-196 60-60 256 256-256 256z"/></svg>
                  </button>
                </ce-tip>
                <button type="button" class="btn btn-success me-1 mb-1" data-bs-toggle="popover" data-bs-placement="left" data-bs-dismissible="true"
                  data-bs-title="Dismissible Popover"
                  data-bs-content='Here we add more content for testing. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.'>
                  Dismissible
                </button>
                <button type="button" id="popoverElementContents" class="btn btn-dark me-1 mb-1" data-bs-placement="right" data-bs-custom-class="customClass">
                  Right
                </button>
                <button id="popoverWithEvents" type="button" class="btn btn-secondary me-1 mb-1" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Popover on Bottom">
                 Events
                </button>
                <div class="position-static d-flex" id="staticContainer1">
                  <button type="button" class="btn btn-primary me-1 mb-1" data-bs-toggle="popover" data-bs-title="Popover in static container" data-bs-content="This popover is added to a position: static container. If the configured container belongs to parent with position: relative, the component will bypass the configuration.">Static</button>
                </div>                
                <button type="button" class="btn btn-outline-secondary position-absolute d-none" style="top:0; right: 0;" data-bs-toggle="popover" data-bs-placement="top" data-bs-title="Popover on absolute position" data-bs-content="This button is rendered in position: absolute and this requires a position: relative container.">Absolute</button>
                <input style="max-width: 100px; display: inline; vertical-align: bottom;" type="text" value="" class="form-control popover-via-template me-1 mb-1" placeholder="Focus me">
                <button type="button" id="popover-via-click" class="btn btn-warning me-1 mb-1"  data-bs-title="Popover on CLICK" data-bs-content="This popover is added to a position: relative container. Now simply click again to dismiss.">
                  Click
                </button>
                <svg class="me-1 mb-1" viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" data-bs-toggle="popover" data-bs-placement="top" data-bs-title="Demo Popover Title for SVG"
                  data-bs-content="This is a demo content for a popover initialized on an &lt;code&gt;&amp;lt;svg&amp;gt;&lt;/code&gt; element.">
                  <rect fill="white" stroke="#ccc" stroke-width="1" width="100%" height="100%" rx="5"></rect>
                  <text direction="ltr" fill="#333" x="25" y="25" font-size="14">SVG</text>
                </svg>
                <img class="me-1 mb-1" data-bs-toggle="popover" data-bs-placement="top"  data-bs-title="Demo Popover Title for IMG" data-bs-content="This is a demo content for popover initialized on an &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; element." alt="Demo Popover for IMG" src="" />
                
              </div>
              <div class="position-relative p-3 mb-3 bg-light rounded">
                <p style="width: calc(100% - 190px)">This is an a <code>&lt;div class="position-relative"&gt;</code> parent element to hold two position-absolute elements with Popover.
                </p>
                <svg class="position-absolute absolute-svg" viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" data-bs-toggle="popover" data-bs-placement="top" data-bs-title="Demo Popover Title for SVG"
                  data-bs-content="This is a demo content for a popover initialized on an &lt;code&gt;&amp;lt;svg&amp;gt;&lt;/code&gt; element.">
                  <rect fill="white" stroke="#ccc" stroke-width="1" width="100%" height="100%" rx="5"></rect>
                  <text direction="ltr" fill="#333" x="25" y="25" font-size="14">SVG</text>
                </svg>
                <img class="position-absolute absolute-img" data-bs-toggle="popover" data-bs-placement="top"  data-bs-title="Demo Popover Title for IMG" data-bs-content="This is a demo content for popover initialized on an &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; element." alt="Demo Popover for IMG" src="" />
              </div>
            </section>
          </section>

          <section id="componentScrollspy">
            <h2>Scrollspy</h2>
            <p>The <b>ScrollSpy</b> component inherits most of the <a rel="noreferrer"
                href="https://getbootstrap.com/docs/5.3/components/scrollspy/" target="_blank">layout and other requirements</a> from
              the original component. This component offers public methods, the specific original event, and provides rich JavaScript
              and DATA APIs.</p>
            <p>The component will initialize for each element with <code>data-bs-spy="scroll"</code> attribute, but will not work if
              the above requirements are not met or the anchors don't reference the containers accordingly. In addition, the component
              will handle click to enable smooth scroll for your targets by default without any additional options.</p>
            <p>This implementation uses the <a href="https://github.com/thednp/position-observer">PositionObserver</a>
              which is responsible for triggering the update of the menu items instead of the previously inneficient <code>resize</code>
              and <code>scroll</code> event listeners.</p>
          
            <section id="scrollspyOptions">
              <h3>ScrollSpy Options</h3>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Type</th>
                      <th class="col-2">Default</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>target</code></td>
                      <td><em>string</em><br>or a<br>reference</td>
                      <td>element <code>'#ID'</code><br>
                        or other reference
                      </td>
                      <td>The option to target the container with <code>data-bs-spy="scroll"</code> attribute.<br>EG:
                        <code>data-bs-target="#myMenuID"</code></td>
                    </tr>
                    <tr>
                      <td><code>offset</code></td>
                      <td>-</td>
                      <td>-</td>
                      <td>This option has been removed in BSN v5.1.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>

            <section id="scrollspyMethods">
              <h3>ScrollSpy Methods</h3>
              <h4>instance.refresh()</h4>
              <p>When DOM layout changes occured without triggering a resize of your element, you
                will have this option to immediately update the status of your menu items.</p>
              <h4>instance.dispose()</h4>
              <p>Removes the component from target element.</p>
              <h4>ScrollSpy.getInstance()</h4>
              <p>A <i>static</i> method that allows you to access a ScrollSpy instance associated to a DOM element.</p>
            </section>
          
            <section id="scrollspyEvents">
              <h3>ScrollSpy Events</h3>
              <p>The <code>event.target</code> is the element we initialized the component via JavaScript or has the 
                <code>data-bs-spy="scroll"</code> attribute. The newly activated menu item is the <code>event.relatedTarget</code>
                of the event object.</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Event Type</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>activate.bs.scrollspy</code></td>
                      <td>This event fires whenever a new item was activated by the component. The <code>event.relatedTarget</code>
                      is the newly activated list/menu item.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          
            <section id="scrollspyDATA">
              <h3>ScrollSpy DATA API</h3>
              <p>To initialize <b>ScrollSpy</b>, remember the <a rel="noreferrer"
                  href="http://getbootstrap.com/javascript/#scrollspy-usage" target="_blank">requirements</a> from the original
                jQuery plugin. The component can initialize any element with <code>overflow: auto|scroll</code> and a fixed
                height, or the <code>&lt;body&gt;</code> or an immediate child element. For the second case we need some special
                HTML markup and appropriate styling for containers in order to initialize.</p>
          
              <p>An <b>overflowing element</b> that has set <code>overflow: auto|scroll</code> style rule:</p>
              <ul>
                <li>The headings have the required IDs;</li>
                <li>Only the element requires some additional CSS;</li>
                <li>No special markup required.</li>
              </ul>

<pre><code class="language-markup">&lt;!-- the element we initialize ScrollSpy on --&gt;
&lt;div data-bs-spy="scroll" data-bs-target="#navbar-example" class="scrollspy-example"&gt;

  &lt;!-- we look for the position of heading --&gt;
  &lt;h4 id="one"&gt;Title ONE&lt;/h4&gt;
  &lt;p&gt;Valid TEXT goes here&lt;/p&gt;

  &lt;h4 id="twoOne"&gt;Title TWO&lt;/h4&gt;
  &lt;p&gt;Valid TEXT goes here&lt;/p&gt;

  &lt;h4 id="three"&gt;Title THREE&lt;/h4&gt;
  &lt;p&gt;Valid TEXT goes here&lt;/p&gt;

&lt;/div&gt;

&lt;!-- we need a target, any of the below elements with an ID will do --&gt;
&lt;nav id="nav-example"&gt; &lt;!-- we can also target it's parent as well --&gt;
  &lt;ul id="navbar-example" class="nav flex-column"&gt; &lt;!-- this is our element's target --&gt;
    &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#one">One&lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#two">Two&lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#three">Three&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;
</code></pre>
              <p>In this case we only need to set a fixed height for the element and change its overflow:</p>
          
<pre><code class="language-css">/* the element we initialize ScrollSpy on */
.scrollspy-example {
  position: relative; /* required */
  height: 150px; overflow: auto; /* required: height must be px based, and overflow: scroll/auto */
}
</code></pre>
          
              <p>A <b>non-overflowing element</b> that wraps most of the content of your page:</p>
              <ul>
                <li>Special markup IS required;</li>
                <li>The element's child containers have the required IDs;</li>
                <li>Child containers require some additional styling.</li>
              </ul>

<pre><code class="language-markup">&lt;!-- the element we initialize ScrollSpy on --&gt;
&lt;div data-bs-spy="scroll" data-bs-target="#navbar-example" class="scrollspy-example"&gt;

&lt;section id="one"&gt; &lt;!-- this is a ScrollSpy container --&gt;
  Valid HTML goes here
&lt;/section&gt;

&lt;section id="two"&gt;
  &lt;section id="twoone"&gt;
    One level nested containers also apply
  &lt;/section&gt;

  &lt;section id="twotwo"&gt;
    This is your second nested container
  &lt;/section&gt;
&lt;/section&gt;

&lt;/div&gt;

&lt;!-- we need a target, any of the below elements with an ID will do --&gt;
&lt;nav&gt; &lt;!-- we can also target it's parent as well --&gt;
&lt;ul id="myScrollSpyTarget" class="nav flex-column"&gt; &lt;!-- this is our element's target --&gt;
  &lt;li class="nav-item"&gt;&lt;a href="#one">One&lt;/a&gt;&lt;/li&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link" href="#two"&gt;Two&lt;/a&gt;
    &lt;ul class="nav flex-column"&gt;
      &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#twoone">Two One&lt;/a&gt;&lt;/li&gt;
      &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#twotwo">Two Two&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
</code></pre>

            </section>

            <section id="scrollspyJS">
              <h3>ScrollSpy JavaScript API</h3>
              <p>For full control and access to the component's features, coding the JavaScript part is a breeze. Assuming the
                above markup have been injected into the DOM and the CSS is set, let's initialize, apply the public method and
                attach listeners to the original event.</p>
          
<pre><code class="language-javascript">// the element we initialize ScrollSpy on
var myScrollSpyElement = document.getElementsByClassName('scrollspy-example')[0];

// let's give the initialization a JavaScript reference for the "target" option
var myScrollSpyTarget = document.getElementById('myScrollSpyTarget');

// initialize the ScrollSpy for this element
var myScrollSpyInit = new BSN.ScrollSpy(myScrollSpyElement, {
  // set options
  target : myScrollSpyTarget,
  // alternativelly, provide a valid selector string
  // EG: ".my-unique-class-name" or "#my-unique-ID"

  // in some cases the offset option would help calculate
  // the correct boundaries of target containers
  offset: 15
})
</code></pre>
          
              <p>If the initialization validates (the <code>target</code> option is valid and the component links the element with
                it's target), we have access to the methods and the original event.</p>
          
<pre><code class="language-javascript">// apply the public method after DOM changed
// a new element container and it's corresponding menu item have been injected into the DOM
myScrollSpyInit.refresh();

// attach an event handler
myScrollSpyElement.addEventListener('activate.bs.scrollspy', function(event){
  // do some cool stuff
  // event.target is myScrollSpyElement
  // event.relatedTarget is the menu item link that triggered the event
}, false);

// when no longer needed, destroy
myScrollSpyInit.dispose();
</code></pre>
          
              <p>To get access to an initialization object regardless of how it was initialized, here's how to do it:</p>
          
<pre><code class="language-javascript">// grab an element we know it was initialized via DATA API
var myScrollSpy = document.getElementById('myScrollSpy');

// get the instance
var myScrollSpyInit = BSN.ScrollSpy.getInstance(myScrollSpy);

// call the public methods
myScrollSpyInit.refresh();
// or
myScrollSpyInit.dispose();
</code></pre>
          
              <p>Now this makes alot more sense, especially when you expect full control and also want to make sure you don't
                attach event listeners multiple times for your elements.</p>
            </section>
          
            <section id="scrollspyExamples">
              <h3>ScrollSpy Examples</h3>
              <p>According to the above <a href="#scrollspyUsage">Usage Guide</a> let's initialize an overflowing element via DATA
                API:</p>
          
              <nav class="navbar navbar-dark navbar-expand-md bg-dark px-3">
                <a class="navbar-brand" href="#">SS Example</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#scrollSpy-nav"
                  aria-controls="scrollSpy-nav" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div id="scrollSpy-nav" class="collapse navbar-collapse">
                  <ul id="navbar-example" class="navbar-nav nav-pills">
                    <li class="nav-item"><a class="nav-link" href="#first">Tumblr farm</a></li>
                    <li class="nav-item"><a class="nav-link" href="#second">Carles aesthetic</a></li>
                    <li class="nav-item dropdown">
                      <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">More Items <span class="caret"></span></a>
                      <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item" href="#one">one</a>
                        <a class="dropdown-item" href="#two">two</a>
                        <a class="dropdown-item" href="#three">three</a>
                      </div>
                    </li>
                  </ul>
                </div>
              </nav>
          
              <div data-bs-spy="scroll" data-bs-target="#navbar-example" class="scrollspy-example border py-1 px-3 mb-3">
                <h4 id="first">Tumblr farm</h4>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                  farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3
                  wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of
                  them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony
                  biodiesel keffiyeh artisan ullamco consequat.</p>
          
                <h4 id="second">Carles aesthetic</h4>
                <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat
                  mcsweeney's vero. <a href="#second" data-bs-trigger="click" data-bs-toggle="tooltip" title="Sample tooltip">Cupidatat</a> four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck,
                  mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis
                  gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
          
                <h5 id="one">one</h5>
                <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh
                  mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park
                  consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag.
                  Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
          
                <h5 id="two">two</h5>
                <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam.
                  Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure
                  four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party
                  fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable.
                  Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn
                  nesciunt.</p>
          
                <h5 id="three">three</h5>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr
                  farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan.</p>
              </div>      
          
              <p>For this example the overflowing element itself is the target of the <code>scroll</code> event, and above it the
                <code>.nav</code> component as it's target, while for the other example in this page, the side navigation on the
                right side, the <code>window</code> is the target of the <code>scroll</code> event.</p> 

              <div class="card mb-3">
                <div class="card-header d-flex flex-row align-items-center justify-content-between">
                  <h4>Bonus Example</h4>
                  <button class="btn btn-outline-danger" onclick="toggleScrollSpy.call(this)">Dispose</button>
                </div>
                <div class="card-body p-0">
                  <div class="row">
                    <div class="col-4">
                      <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column">
                        <a class="navbar-brand active" href="#">Navbar</a>
                        <nav class="nav nav-pills flex-column w-100 px-2">
                          <a class="nav-link" href="#item-1">Item 1</a>
                          <nav class="nav nav-pills flex-column">
                            <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
                            <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
                          </nav>
                          <a class="nav-link" href="#item-2">Item 2</a>
                          <a class="nav-link active" href="#item-3">Item 3</a>
                          <nav class="nav nav-pills flex-column">
                            <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
                            <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
                          </nav>
                        </nav>
                      </nav>
                    </div>
                    <div class="col-8">
                      <div id="disposableSpy" data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0" 
                        style="position: relative; height: 370px; overflow: auto; outline:none">
                        <h4 class="pt-3" id="item-1">Item 1</h4>
                        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. 
                          Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor 
                          eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua 
                          et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt 
                          mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut 
                          eiusmod cupidatat elit dolore.</p>
                        <h5 id="item-1-1">Item 1-1</h5>
                        <p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. 
                          Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat 
                          id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod 
                          aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip 
                          exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing 
                          exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit 
                          cillum anim et fugiat.</p>
                        <h5 id="item-1-2">Item 1-2</h5>
                        <p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit 
                          consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod 
                          sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod 
                          dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.</p>
                        <h4 id="item-2">Item 2</h4>
                        <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim 
                          exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit 
                          ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit 
                          aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non 
                          commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
                        <h4 id="item-3">Item 3</h4>
                        <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim 
                          proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore 
                          velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
                        <h5 id="item-3-1">Item 3-1</h5>
                        <p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation 
                          aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore 
                          nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident 
                          veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor 
                          excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.</p>
                        <h5 id="item-3-2">Item 3-2</h5>
                        <p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit 
                          do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat 
                          consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip 
                          consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna 
                          fugiat eiusmod amet officia.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <p>If the initialization element is hidden or its height is 0, the <b>ScrollSpy</b> component will attach the <code>scroll</code> 
                listener to the window, basically an invalid instance. Be sure to check the 
                <a href="https://getbootstrap.com/docs/5.0/components/scrollspy/">original plugin</a> for other guides or to compare 
                implementations.</p>

          </section>
          </section>
          
          <section id="componentTab">
            <h2>Tab</h2>
            <p>The <b>Tab</b> component covers all original jQuery plugin functionality and even comes with new features such as
              being able to work with any kind of navigation components in Bootstrap, or providing support for height animation as
              you can see in the example below.</p>
            <p>The component can initialize both via JavaScript and the DATA API, covers the original events and exposes a
              specific public method, but in contrast to the original plugin it offers some options for you to play with.</p>
          
            <section id="tabOptions">
              <h3>Tab Options</h3>

              <p>To optimize the component and simplify the script, the previously featured initialization option 
                <code>height</code> has been deprecated. The component will always create a height transition for the 
                <code>&lt;div class="tab-content"&gt;</code> element.</p>
            </section>
          
            <section id="tabMethods">
              <h3>Tab Methods</h3>
              <h4>instance.show()</h4>
              <p>The public method to switch to a certain tab of your choice via JavaScript. If that tab is already 
                visible / active or the method is called while animation is running, the call has no effect.</p>
              <h4>instance.dispose()</h4>
              <p>Removes the component from target element.</p>
              <h4>Tab.getInstance()</h4>
              <p>A <i>static</i> method that allows you to access a Tab instance associated to a DOM element.</p>
            </section>
          
            <section id="tabEvents">
              <h3>Tab Events</h3>
              <p>The <code>event.target</code> for the component original events is either the current active tab or the next tab
                to be activated, depending on the specific event, as explained below. The events will fire in the exact order shown
                in table below:</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Event Type</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>hide.bs.tab</code></td>
                      <td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). The
                        <code>event.target</code> is the current active tab, while <code>event.relatedTarget</code>
                        is the new soon-to-be-active tab.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>show.bs.tab</code></td>
                      <td>This event fires on tab show, but before the new tab has been shown. The <code>event.target</code> is
                        the tab next to become active and <code>event.relatedTarget</code> is the current
                        active tab (if available).<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>hidden.bs.tab</code></td>
                      <td>This event fires after a new tab is shown (and thus the previous active tab is hidden). The
                        <code>event.target</code> is the tab that just became inactive and <code>event.relatedTarget</code>
                        is the new active tab.</td>
                    </tr>
                    <tr>
                      <td><code>shown.bs.tab</code></td>
                      <td>This event fires on tab show after a tab has been shown. The <code>event.target</code> is the new active
                        tab and <code>event.relatedTarget</code> is the previous active tab (if available).</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          
            <section id="tabDATA">
              <h3>Tab DATA API</h3>
              <p>Here is a sample markup to showcase the usage of the component with the above mentioned methods. As you can see,
                each of the elements with the <code>data-bs-toggle="tab"</code> attribute are subject to the
                <b>Tab</b> component initialization.</p>
          
<pre><code class="language-markup">&lt;!-- for better usage, wrap the tabs and contents --&gt;
&lt;div id="myTabsWrapper"&gt;

&lt;!-- Nav tabs --&gt;
&lt;ul id="myTabs" class="nav nav-tabs" role="tablist"&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link active" id="home-tab" href="#home" data-bs-toggle="tab" data-height="true" aria-controls="home" aria-selected="true" role="tab"&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link" id="profile-tab" href="#profile" data-bs-toggle="tab" data-height="true" aria-controls="profile" aria-selected="false" role="tab"&gt;Profile&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link" id="messages-tab" href="#messages" data-bs-toggle="tab" data-height="true" aria-controls="messages" aria-selected="false" role="tab"&gt;Messages&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link" id="settings-tab" href="#settings" data-bs-toggle="tab" data-height="true" aria-controls="settings" aria-selected="false" role="tab"&gt;Settings&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Tab panes --&gt;
&lt;div class="tab-content"&gt;
  &lt;div role="tabpanel" class="tab-pane fade active show" aria-labelledby="home-tab" id="home"&gt;...&lt;/div&gt;
  &lt;div role="tabpanel" class="tab-pane fade" aria-labelledby="profile-tab" id="profile"&gt;...&lt;/div&gt;
  &lt;div role="tabpanel" class="tab-pane fade" aria-labelledby="messages-tab" id="messages"&gt;...&lt;/div&gt;
  &lt;div role="tabpanel" class="tab-pane fade" aria-labelledby="settings-tab" id="settings"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;
</code></pre>

              <p>Also don't forget that this functionality works on CSS3 enabled browsers with the <b>Collapse</b> styling in
                place.</p>
            </section>

            <section id="tabJS">
              <h3>Tab JavaScript API</h3>
              <p>Since the component will target a single element with / or without <code>data-bs-toggle="tab"</code> attribute, but
                at least it references a corresponding tab via <code>href</code> or
                <code>data-bs-target</code>, we will need to do a simple loop to initialize multiple elements. Assuming the above
                markup have been injected into the DOM, let's initialize, use the public
                method and attach listeners to the original events.</p>
          
<pre><code class="language-javascript">// first, we reference the .nav component that holds all tabs
var myTabs = document.getElementById('myTabs');

// let's give the initialization a JavaScript reference for the "target" option
var myTabsCollection = myTabs.getElementsByTagName('A');

// initialize the component for all items in the collection
Array.from(myTabsCollection).forEach(
  tab => new BSN.Tab( tab )
);
</code></pre>
          
              <p>If each item in the collection meets the expected markup and the tab it referencing is found, the initialization
                will then validate and give you immediate access to method.</p>
          
<pre><code class="language-javascript">// get last item from collection and reference it's initialization
var myLastTab = myTabsCollection[myTabsCollection.length-1];
var myLastTabInit = BSN.Tab.getInstance(myLastTab);

// assuming the last tab is not active, we can show it
myLastTabInit.show();

// attach an event handler as well
myLastTab.addEventListener('show.bs.tab', function(event){
  // do some cool stuff
  // event.target is myLastTab
  // event.relatedTarget is the previous active tab
}, false);
</code></pre>
          
              <p>We could have also built an <code>Object</code> / <code>Array</code> with the initialization objects, but that
                depends very much on your needs.</p>
          
            </section>

            <section id="tabExamples" style="position: relative">
              <h3>Tab Examples</h3>
              <p>OK now we're ready to put this component to the test. We'll use all Bootstrap <code>.nav</code> components in the
                pool.</p>
          
              <ul id="myTab" class="nav nav-tabs mb-2" role="tablist">
                <li class="nav-item">
                  <a class="nav-link" href="#home" id="home-tab" role="tab" data-height="true"
                    data-bs-toggle="tab" aria-controls="home" aria-expanded="true">
                    <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                      <path d="M610.97 656.333c0 0 361.421-260.813 321.331-559.309-0.87-6.502-3.021-10.906-5.734-13.722-2.765-2.816-7.014-5.018-13.466-5.888-291.686-41.011-546.509 328.806-546.509 328.806-221.082-26.47-205.005 17.613-305.869 259.891-19.302 46.182 11.981 62.106 46.285 49.101 34.304-12.902 109.978-41.523 109.978-41.523l132.608 135.578c0 0-27.955 77.517-40.602 112.589-12.698 35.123 2.816 67.123 48.026 47.411 236.749-103.219 279.859-86.733 253.952-312.934z m51.66-302.899c-30.618-31.386-30.618-82.125 0-113.51 30.618-31.283 80.23-31.283 110.899 0 30.618 31.283 30.618 82.074 0 113.51-30.669 31.283-80.333 31.283-110.899 0z" fill="currentColor"></path>
                    </svg>
                    Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link d-flex flex-row align-items-center" href="#profile" role="tab" id="profile-tab" data-bs-toggle="tab" aria-controls="profile">
                    No Animation
                  </a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="myTabDrop1" data-bs-toggle="dropdown"
                    aria-controls="myTabDrop1-contents" aria-expanded="false">Dropdown <span class="caret"></span>
                  </a>
                  <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
                    <a class="dropdown-item" href="#dropdown1" role="tab" id="dropdown1-tab" data-bs-toggle="tab"
                        aria-controls="dropdown1" aria-expanded="false">Some tab</a>
                    <a class="dropdown-item" id="tabEventsExample" href="#dropdown2" role="tab" aria-controls="dropdown2"
                        aria-expanded="false">Events</a>
                  </div>
                </li>
              </ul>
              <div id="myTabContent" class="tab-content">
                <div role="tabpanel" class="tab-pane fade" id="home" aria-labelledby="home-tab">
                  <p><b class="text-info">These tabs have no active tab on initialization.</b> Nesciunt tofu stumptown aliqua, retro synth
                    master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
                  <p>Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson
                    ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher
                    voluptate nisi qui.</p>
                </div>
                <div role="tabpanel" class="tab-pane" id="profile" aria-labelledby="profile-tab">
                  <p><b class="text-info">This tab have no animation.</b> Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1
                    labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer
                    twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum
                    PBR.</p>
                  <p>Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero
                    magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean
                    shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher
                    vero sint qui sapiente accusamus tattooed echo park.</p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledby="dropdown1-tab">
                  <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny
                    pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard
                    locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit
                    cred pitchfork.</p>
                  <p>Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog.
                    Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu
                    synth chambray yr.</p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="tabEventsExample">
                  <p><b class="text-info">This tab has all events attached.</b> Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art
                    party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack
                    portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia
                    PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
                  <p>Wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial
                    keffiyeh echo park vegan.</p>
                </div>
              </div>

              <ul id="myTab1" class="nav nav-pills mb-2" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" href="#home1" id="home1-tab" role="tab"
                    data-bs-toggle="tab" aria-controls="home1" aria-expanded="true">
                    <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                      <path d="M610.97 656.333c0 0 361.421-260.813 321.331-559.309-0.87-6.502-3.021-10.906-5.734-13.722-2.765-2.816-7.014-5.018-13.466-5.888-291.686-41.011-546.509 328.806-546.509 328.806-221.082-26.47-205.005 17.613-305.869 259.891-19.302 46.182 11.981 62.106 46.285 49.101 34.304-12.902 109.978-41.523 109.978-41.523l132.608 135.578c0 0-27.955 77.517-40.602 112.589-12.698 35.123 2.816 67.123 48.026 47.411 236.749-103.219 279.859-86.733 253.952-312.934z m51.66-302.899c-30.618-31.386-30.618-82.125 0-113.51 30.618-31.283 80.23-31.283 110.899 0 30.618 31.283 30.618 82.074 0 113.51-30.669 31.283-80.333 31.283-110.899 0z" fill="currentColor"></path>
                    </svg>
                    Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link d-flex flex-row align-items-center" href="#profile1" role="tab"
                    id="profile1-tab" data-bs-toggle="tab" aria-controls="profile1">Profile
                  </a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="myTabDrop2" data-bs-toggle="dropdown"
                    aria-controls="myTabDrop2-contents" aria-expanded="false">Dropdown
                  </a>
                  <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop2-contents">
                    <a class="dropdown-item" href="#dropdown3" role="tab" id="dropdown3-tab" data-bs-toggle="tab"
                      aria-controls="dropdown4" aria-expanded="false">Some tab</a>
                    <a class="dropdown-item" id="dropdown4-tab" href="#dropdown4" role="tab" aria-controls="dropdown4"
                      data-bs-toggle="tab" aria-expanded="false">Last Tab</a>
                  </div>
                </li>
              </ul>
              <div id="myTabContent1" class="tab-content">
                <div role="tabpanel" class="tab-pane active show" id="home1" aria-labelledby="home1-tab">
                  <p><b class="text-info">These tabs have no animation</b> Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
                    master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
                  <p>Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson
                    ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher
                    voluptate nisi qui.</p>
                </div>
                <div role="tabpanel" class="tab-pane" id="profile1" aria-labelledby="profile1-tab">
                  <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1
                    labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer
                    twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum
                    PBR.</p>
                  <p>Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero
                    magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean
                    shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher
                    vero sint qui sapiente accusamus tattooed echo park.</p>
                </div>
                <div role="tabpanel" class="tab-pane" id="dropdown3" aria-labelledby="dropdown3-tab">
                  <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny
                    pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard
                    locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit
                    cred pitchfork.</p>
                  <p>Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog.
                    Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu
                    synth chambray yr.</p>
                </div>
                <div role="tabpanel" class="tab-pane" id="dropdown4" aria-labelledby="dropdown4-tab">
                  <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art
                    party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack
                    portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia
                    PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
                  <p>Wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial
                    keffiyeh echo park vegan.</p>
                </div>
              </div>

            </section>
          </section>

          <section id="componentToast">
            <h2>Toast</h2>
            <p>The <b>Toast</b> component covers the original events and its specific instance methods as well as options.
              The component also provides user interaction functionality, in the sense that if a certain toast is configured to
              autohide, user focus or mouse over the toast will extend the time it takes for it to autohide.</p>
            <p>For design customization and accessibility guidelines please refer back to the 
              <a href="https://getbootstrap.com/docs/5.0/components/toasts/">original plugin</a>. </p>

            <section id="toastOptions">
              <h3>Toast Options</h3>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Type</th>
                      <th>Default</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>animation</code></td>
                      <td><em>boolean</em></td>
                      <td><em>true</em></td>
                      <td>Option to customize the component animation. If you are using a different animation other than
                        <code>fade</code>, you can specify that via the <code>data-bs-animation="ANIMATION"</code> attribute.
                        This will add an additional CSS class to the tooltip to enable a custom transition.</td>
                    </tr>
                    <tr>
                      <td><code>autohide</code></td>
                      <td><em>boolean</em></td>
                      <td><em>true</em></td>
                      <td>Option to set a hide your toast notification automatically after being shown to the used for a 
                        certain amount of time set below. Can be set via both JavaScript and the <code>data-bs-autohide="true"</code> 
                        attribute.</td>
                    </tr>
                    <tr>
                      <td><code>delay</code></td>
                      <td><em>number</em></td>
                      <td><em>5000</em></td>
                      <td>A short delay before hiding the tooltip. Can be set via JavaScript or the
                        <code>data-bs-delay="DELAY"</code> attribute.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          
            <section id="toastMethods">
              <h3>Toast Methods</h3>
              <p>The <b>Toast</b> component exposes two public methods as well as a <i>static</i> method to be used via JavaScript:</p>

              <h4>instance.show()</h4>
              <p>The method shows an initialized toast.</p>
              <h4>instance.hide()</h4>
              <p>The method hides an initialized toast, but doesn't remove
                the toast from the DOM.</p>
              <h4>instance.dispose()</h4>
              <p>Removes the component from target element without calling any of the 
                above methods. Also the toast is not removed from the DOM.</p>
              <h4>instance.isShown <small>getter</small></h4>
              <p>Checks if the toast is visible to the user and returns <code>boolean</code>.</p>
              <h4>Toast.getInstance()</h4>
              <p>A <i>static</i> method that allows you to access a Toast instance associated to a DOM element.</p>

            </section>
          
            <section id="toastEvents">
              <h3>Toast Events</h3>
              <p>The <code>event.target</code> for the component's original events is the one with the 
                <code>class="toast"</code> attribute, which is also the parent of the initialization target, usually the
                element having the <code>data-bs-toggle="toast"</code> attribute.</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Event Type</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>show.bs.toast</code></td>
                      <td>This event is fired immediately when the <code>.show()</code> instance method has been called.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>shown.bs.toast</code></td>
                      <td>This event is fired when the toast has finished being shown to the user.</td>
                    </tr>
                    <tr>
                      <td><code>hide.bs.toast</code></td>
                      <td>This event is fired immediately when the <code>.close()</code> instance method has been called.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>hidden.bs.toast</code></td>
                      <td>This event is fired when the toast has finished being hidden from the user.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          
            <section id="toastDATA">
              <h3>Toast DATA API</h3>
              <p>The component will initialize all elements with proper markup and the specific DATA API attributes found in
                the DOM. Similar to <b>Modal</b> or <b>Offcanvas</b> components, <b>Toast</b> can also work with trigger elements
                as shown in the sample markup below:</p>
          
<pre><code class="language-markup">&lt;!-- provide a trigger button --&gt;
&lt;button class="btn btn-primary" data-bs-toggle="toast" data-bs-target="#tastyToast" aria-controls="tastyToast">
  Button with data-bs-target
&lt;/button&gt;
  
&lt;!-- or an anchor link --&gt;
&lt;a class="btn btn-primary" data-bs-toggle="toast" href="#tastyToast" role="button" aria-controls="tastyToast"&gt;
  Link with href
&lt;/a&gt;

&lt;!-- and the toast itself --&gt;
&lt;div id="tastyToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  &lt;div class="toast-header">
    &lt;img src="..." class="rounded mr-2" alt="...">
    &lt;strong class="mr-auto">Bootstrap&lt;/strong>
    &lt;small>11 mins ago&lt;/small>
    &lt;button id="myTastyToast" type="button" class="ml-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close">&lt;/button>
  &lt;/div>
  &lt;div class="toast-body">
    Hello, world! This is a toast message.
  &lt;/div>
&lt;/div>
</code></pre>
            <p>Note that the <code>data-bs-dismiss="toast"</code> attribute is required for the button which dismisses the toast
              as well as the <code>data-bs-toggle="toast"</code> and <code>data-bs-target="#toastID"</code> attributes are
              required for the trigger elements.</p>
            </section>

            <section id="toastJS">
              <h3>Toast JavaScript API</h3>
              <p>After inserting a new toast notification into the page, you can initialize it via JavaScript. Considering the
                above markup, you can do the following:</p>
          
<pre><code class="language-javascript">// initialize
var myTastyToast = new BSN.Toast('#tastyToast');
</code></pre>
          
              <p>Also attach listeners to the original events:</p>
          
<pre><code class="language-javascript">// show.bs.toast
tastyToast.addEventListener('show.bs.toast', function(event){
  // do something cool
  // this event can be default prevented
  // event.target is &lt;div class="toast"&gt;
}, false);

// shown.bs.toast
tastyToast.addEventListener('shown.bs.toast', function(event){
  // do something cool
  // event.target is &lt;div class="toast"&gt;
}, false);

// hide.bs.toast
tastyToast.addEventListener('hide.bs.toast', function(event){
  // do something cool
  // this event can be default prevented
  // event.target is &lt;div class="toast"&gt;
}, false);

// hidden.bs.toast
tastyToast.addEventListener('hidden.bs.toast', function(event){
  // do something cool
  // event.target is &lt;div class="toast"&gt;
}, false);
</code></pre>
          
              <p>Like all components of the library you can access the initialization object even if it was done via the 
                DATA API:</p>
          
<pre><code class="language-javascript">// find an element initialized via DATA API
var myToastButton = document.getElementById('myToastButton');

// reference the initialization object
var myToastInit = BSN.Toast.getInstance(myToastButton);

// call the public methods
myToastInit.show();
myToastInit.hide();
// or remove functionality
myToastInit.dispose();
</code></pre>
          
            </section>
          
            <section id="toastExamples">
              <h3>Toast Example</h3>

              <div class="btn-toolbar mb-3">
                <button class="btn btn-outline-secondary me-1" data-bs-toggle="toast" data-bs-target="#liveToast1">Button Trigger Toast</button>
                <a href="#liveToast2" class="btn btn-outline-secondary" data-bs-toggle="toast">Anchor Trigger Toast</a>
              </div>

              <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
                <div id="liveToast1" class="toast fade" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" data-bs-animation="true">
                  <div class="toast-header">
                    <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
                      <rect fill="#007aff" width="100%" height="100%"></rect>
                    </svg>
                    <strong class="me-auto">BSN</strong>
                    <small>11 mins ago</small>
                    <button id="myTastyToastBTN" type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                  </div>
                  <div class="toast-body">
                    <b>Hello, world! This is a toast message.</b><br>
                    <span class="text-info">This toast has some listeners attached to all its original events, so check your console.</span>
                  </div>
                </div>

                <div id="liveToast2" class="toast mt-1 fade" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" data-bs-animation="true">
                  <div class="toast-header">
                    <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
                      <rect fill="#007aff" width="100%" height="100%"></rect>
                    </svg>
                    <strong class="me-auto">BSN</strong>
                    <small>11 mins ago</small>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                  </div>
                  <div class="toast-body">
                    <b>Hello, there! This is another toast message.</b><br>
                    <span class="text-warning">This toast should showcase the stacking of multiple toasts.</span>
                  </div>
                </div>
              </div>

            </section>
          </section>
          
          <section id="componentTooltip">
            <h2>Tooltip</h2>
            <p>Unlike the original plugin, our <b>Tooltip</b> component will initialize right away all elements with the
              <code>data-bs-toggle="tooltip"</code> attribute. Additionally, the component can do automatic placement without any
              options required or third party dependency and covers essential options, methods and original events.</p>
            <p>Our implementation can automatically reposition your tooltips when needed thanks to our new
              <a href="https://github.com/thednp/position-observer">PositionObserver</a> that will trigger the update
              instead of the previously implemented <code>resize</code> and <code>scroll</code> event listeners.</p>
          
            <section id="tooltipOptions">
              <h3>Tooltip Options</h3>
              <p>The component covers most important options including a <code>template</code> option, and excluding some of the 
                options featured in the original jQuery plugin such as a <code>selector</code> option for auto-initialization, 
                or a <code>trigger</code> option.</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Type</th>
                      <th>Default</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>animation</code></td>
                      <td><em>boolean</em></td>
                      <td><em>true</em></td>
                      <td>Option to enable/disable the tooltip animation. If you disable the animation, you can do that via the
                        <code>data-bs-animation="false"</code> attribute. When enabled, this option will add an additional CSS class <code>'fade'</code>
                        to the tooltip to enable the transition.</td>
                    </tr>
                    <tr>
                      <td><code>customClass</code></td>
                      <td><em>string</em></td>
                      <td><em>true</em></td>
                      <td>Option to customize the tooltip by adding a custom CSS class. You can set this option via the 
                        <code>data-bs-custom-class="my-class"</code> attribute.</td>
                    </tr>
                    <tr>
                      <td><code>delay</code></td>
                      <td><em>number</em></td>
                      <td><em>200</em></td>
                      <td>A short delay before hiding the tooltip. Can be set via JavaScript or the
                        <code>data-bs-delay="DELAY"</code> attribute.</td>
                    </tr>
                    <tr>
                      <td><code>placement</code></td>
                      <td><em>string</em></td>
                      <td><em>top</em></td>
                      <td>Option to set a specific placement to <code>top</code>, <code>bottom</code>, <code>left</code> or
                        <code>right</code>, relative to it's target. Can be set via both JavaScript and the
                        <code>data-bs-placement="POSITION"</code> attribute.</td>
                    </tr>
                    <tr>
                      <td><code>sanitizeFn</code></td>
                      <td><em>function</em></td>
                      <td>null</td>
                      <td>Option to set a function that will sanitize the title and <code>content</code> and the <code>template</code> of the tooltip. 
                        Our library doesn't include any sanitization function, you are free to use whatever solution suits your need.<br>
                        <b>This option is JavaScript API only.</b></td>
                    </tr>
                    <tr>
                      <td><code>template</code></td>
                      <td colspan="2"><em>string</em><br><em>HTMLElement</em><br>(see description)</td>
                      <td>Allows you to set a custom template for your tooltips and overrides the default one. 
                        You can also specify a DOM node to serve as your template.
                        The following markup is the default template for tooltips:<br>
<code>
'&lt;div class="tooltip" role="tooltip"&gt;<br>
&nbsp;  &lt;div class="tooltip-arrow">&lt;/div&gt;<br>
&nbsp;  &lt;div class="tooltip-inner">&lt;/div&gt;<br>
&lt;/div&gt;'<br>
</code>
                        
                        The <code>title=""</code> or <code>data-bs-title=""</code> attribute will fill in for the 
                        <code>.tooltip-inner</code> element.<br>
                        This option allows you to set an <code>HTMLElement</code> to be cloned and used as the <code>template</code> for your Tooltip.<br>
                        <b>This option is JavaScript API only.</b>
                      </td>
                    </tr>
                    <tr>
                      <td><code>title</code></td>
                      <td><em>string</em><br><em>HTMLElement</em></td>
                      <td>null</td>
                      <td>Allows you to set a custom title to be used for your tooltip; when used via JavaScript
                        API, it will override both the <code>title=""</code> and <code>data-bs-title=""</code> 
                        attributes.<br>
                        This option allows you to set an <code>HTMLElement</code> to be cloned and used as the <code>title</code> filler for your Tooltip.<br>
                      </td>
                    </tr>
                    <tr>
                      <td><code>trigger</code></td>
                      <td><em>string</em></td>
                      <td><em>hover focus</em></td>
                      <td>Option to change the component's trigger event: <code>manual</code>, <code>hover</code>, <code>focus</code>,
                        <code>click</code> or any combination separated via space, except that <code>manual</code> cannot be combined.<br>
                        * <code>manual</code> - makes the tooltip get shown/hidden only via the <code>.show()</code>, <code>.hide()</code> or
                        <code>.toggle()</code> methods, programmed by the developer with own scripting;<br>
                        * <code>click</code> - will toggle the tooltip visibility when <code>click</code> event is triggered by the user,
                        however when the above option <code>dismissible</code> is true, the user can only dismiss the tooltip by clicking the
                        <code>&lt;button class="btn-close"&gt;</code> element.<br>
                        * <code>hover</code> - will attach <code>mouseenter</code> and <code>mouseleave</code> event listeners to show / hide
                        the tooltip with a similar interaction when <code>dismissible</code> option is true;<br>
                        * <code>focus</code> - will attach <code>focusin</code> and <code>focusout</code> event listeners to show / hide the
                        tooltip, also taking into account the <code>dismissible</code> option; in some cases you may want to open a tooltip
                        only on focus for form elements or click for other <code>HTMLElement</code> items.<br>
                        You can set this option value via JavaScript or the <code>data-bs-trigger="EVENT(S)"</code> attribute.</td>
                    </tr>

                  </tbody>
                </table>
              </div>
              <p>Now since <b>Popover</b> extends the <b>Tooltip</b> component, the <code>container</code> option is now deprecated starting
                with BSN v5. When your tooltip title is an HTML markup string, remember to
                <a href="https://www.npmjs.com/package/sanitizer">sanitize the content</a>.</p>
            </section>
          
            <section id="tooltipMethods">
              <h3>Tooltip Methods</h3>
              <p>For full control the <b>Tooltip</b> component exposes a couple of public methods as well as a <i>static</i> method
                to be used via JavaScript:</p>

              <h4>instance.show()</h4>
              <p>The method shows an initialized tooltip. When the method is executed, it will
                always <b>create</b> a new tooltip and append it into your desired container.</p>
              <h4>instance.hide()</h4>
              <p>The method hides an initialized tooltip and remove it from it's container and
                also from the memory, as if you would automatically <em>destroy</em> it.</p>
              <h4>instance.toggle()</h4>
              <p>The method shows the tooltip if hidden and hides it otherwise, using the above
                two methods.</p>
              <h4>instance.enable()</h4>
              <p>Starts showing the tooltip again to the user by re-adding event listeners associated to the target.
                Tooltips are <b>enabled by default</b>.</p>
              <h4>instance.disable()</h4>
              <p>Stops showing the tooltip to the user by removing event listeners associated to the target.</p>
              <h4>instance.toggleEnabled()</h4>
              <p>Toggles the enabled state by calling one of the two methods above.</p>
              <h4>instance.update()</h4>
              <p>Updates the position of the tooltip.</p>
              <h4>instance.handleTouch()</h4>
              <p>The event listener for touch enabled devices.</p>              
              <h4>instance.dispose()</h4>
              <p>Removes the component from the target element.</p>
              <h4>Tooltip.getInstance()</h4>
              <p>A <i>static</i> method that allows you to access a Tooltip instance associated to a DOM element.</p>

            </section>
          
            <section id="tooltipEvents">
              <h3>Tooltip Events</h3>
              <p>The component's original events are same as with the original jQuery Plugin, except
                <code>inserted.bs.tooltip</code>, the way the component works makes that this event is not needed, 
                as it would fire on every instance of the <code>.show()</code> call.</p>
              <p>The <code>event.target</code> of the original events is the target element of component, likelly your 
                element with the <code>data-bs-toggle="tooltip"</code> attribute.</p>
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Event Type</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>show.bs.tooltip</code></td>
                      <td>This event fires immediately when the <code>show</code> instance method is called.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>shown.bs.tooltip</code></td>
                      <td>This event is fired when the tooltip has been made visible to the user.</td>
                    </tr>
                    <tr>
                      <td><code>hide.bs.tooltip</code></td>
                      <td>This event is fired immediately when the <code>hide</code> instance method has been called.<br>
                        <b>This event can be default prevented.</b></td>
                    </tr>
                    <tr>
                      <td><code>hidden.bs.tooltip</code></td>
                      <td>This event is fired when the tooltip has finished being hidden from the user.</td>
                    </tr>
                    <tr>
                      <td><code>updated.bs.tooltip</code></td>
                      <td>This event is fired after the tooltip has updated it's position.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          
            <section id="tooltipDATA">
              <h3>Tooltip DATA API</h3>
              <p>As mentioned before the component will initialize any element found to have the
                <code>data-bs-toggle="tooltip"</code> attribute and a <code>title</code> or a <code>data-bs-title</code>
                attribute for SVG elements.</p>

<pre><code class="language-markup">&lt;!-- any regular link with data-bs-toggle="tooltip" --&gt;
&lt;a href="https://google.com" title="Google" data-bs-toggle="tooltip"&gt;Google&lt;/a&gt;

&lt;!-- any SVG shape with data-bs-toggle="tooltip" --&gt;
&lt;svg viewBox="0 0 80 34" width="80" height="34" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;rect data-bs-toggle="tooltip" data-bs-placement="top" data-bs-delay="150" data-bs-title="Demo Title for SVG" rx="5">&lt;/rect&gt;
&lt;/svg&gt;
</code></pre>

            </section>

            <section id="tooltipJS">
              <h3>Tooltip JavaScript API</h3>
              <p>When you insert new items in the page and want them to initialize the component or you want to have full control
                over your tooltips, the JavaScript way is the best one. You can also initialize for elements not having the 
                specific DATA API, but at least have a <code>title="Not null title"</code> attribute. You can do the following:</p>
          
<pre><code class="language-javascript">// find all elements with title attribute
var elementsTooltip = document.querySelectorAll('[title]');

// attach a tooltip for each
Array.from(elementsTooltip).forEach(
  tip => new BSN.Tooltip( tip, {
    placement: 'top', // string
    animation: true, // boolean
    customClass: 'my-rocket-tooltips', // string
    sanitizeFn: function(dirty){  // use sanitizer of your choice here
      return DOMPurify.sanitize(dirty);
    }
    delay: 150, // integer
  })
)
</code></pre>
          
              <p>In addition, similar to any other component of this library, you can access the initialization and the public
                methods even for elements initialized via DATA API.</p>
          
<pre><code class="language-javascript">// find an element initialized with Tooltip
var myLinkWithTooltip = document.getElementById('myLinkWithTooltip');

// reference the initialization object
var myTooltipInit = BSN.Tooltip.getInstance(myLinkWithTooltip);
</code></pre>
          
              <p>Considering the above element, let's go ahead and put the component's events to use:</p>
          
<pre><code class="language-javascript">// show.bs.tooltip
myLinkWithTooltip.addEventListener('show.bs.tooltip', function(event){
  // do some cool stuff when .show() method is called
  // event.target is myLinkWithTooltip
}, false);

// shown.bs.tooltip
myLinkWithTooltip.addEventListener('shown.bs.tooltip', function(event){
  // do some cool stuff when .show() method completed
  // event.target is myLinkWithTooltip
}, false);

// hide.bs.tooltip
myLinkWithTooltip.addEventListener('hide.bs.tooltip', function(event){
  // do some cool stuff when .hide() method is called
  // event.target is myLinkWithTooltip
}, false);

// hidden.bs.tooltip
myLinkWithTooltip.addEventListener('hidden.bs.tooltip', function(event){
  // do some cool stuff when .hide() method completed
  // event.target is myLinkWithTooltip
}, false);
</code></pre>

              <p>Just because you can, you can re-initialize any element on the fly, to change options and / or content, or to just call the
                <code>.show()</code> method.</p>

<pre><code class="language-javascript">// re-initialize Tooltip and call .show()
new BSN.Tooltip('#selector',options).show();
</code></pre>
          
            </section>
          
            <section id="tooltipExamples">
              <h3>Tooltip Examples</h3>
              <p>Now let's test all the other placement positions, we start with inline links having the <a href="#"
                  title="Testing bottom placement" data-bs-toggle="tooltip" data-bs-placement="bottom">bottom</a> placement,
                then <a href="#" title="Testing left placement" data-bs-toggle="tooltip" data-bs-placement="left">left</a>, and <a
                  href="#" title="Testing right placement" data-bs-toggle="tooltip" data-bs-placement="right">right</a>.
                Let's put it to the test! Some heavy testing on the automatic repositioning with very very long tooltips.</p>

                
              <div class="btn-toolbar mb-3">          
                <ce-tip type="tooltip" class="d-inline-flex me-1 mb-1">
                  <link rel="stylesheet" href="./assets/css/custom-elements.css">
                  <button slot="button" aria-label="Tooltip CustomElement Test" class="btn btn-tooltip"
                    data-bs-toggle="tooltip" 
                    data-bs-title="Custom Element Tooltip" 
                    data-bs-content="This is a CustomElement Tooltip example initialized automatically via data attributes.">
                    CustomElement
                    <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 1024 1024"><path d="M366 698l196-196-196-196 60-60 256 256-256 256z"/></svg>
                  </button>
                </ce-tip>
                <button id="tooltipElementContent" type="button" class="btn btn-primary me-1 mb-1" data-bs-placement="left">Left</button>
                <button id="tooltipWithEvents" type="button" class="btn btn-dark me-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="top" 
                  data-bs-title="&lt;b&gt;Tooltip on top&lt;/b&gt;&lt;br&gt;This tooltip example has all events attached">Events</button>
                <button type="button" class="btn btn-secondary me-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="bottom"
                  data-bs-title="&lt;b&gt;Tooltip on bottom&lt;/b&gt;&lt;br&gt;Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">Bottom</button>
                <button type="button" class="btn btn-success me-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="right" 
                  data-bs-title="&lt;b&gt;Tooltip on right&lt;/b&gt;&lt;br&gt;Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">Right</button>
                <button type="button" class="btn btn-warning me-1 mb-1" data-bs-toggle="tooltip" data-bs-trigger="click"
                  data-bs-title="&lt;b&gt;Tooltip only on click&lt;/b&gt; &lt;span class='badge bg-success'&gt;NEW&lt;/span&gt;&lt;br&gt;Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">Click</button>
                <button id="tooltipTemplateExample" type="button" class="btn btn-danger me-1 mb-1" 
                  data-bs-title="&lt;b&gt;Top TEMPLATE&lt;/b&gt; &lt;span class='badge bg-danger'&gt;HOT&lt;/span&gt;&lt;br&gt;This tooltip will be added to a position: relative container. Check out the &lt;code&gt;scripts.js&lt;/code&gt; file for this template example sample code. Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip.">Template</button>
                <button type="button" class="btn btn-outline-secondary position-absolute me-1 mb-1 d-none" style="top:0; right: 0;" data-bs-toggle="tooltip" data-bs-placement="left" 
                  data-bs-title="Tooltip on absolute position element. This requires a position: relative container.">Absolute</button>
                <input style="max-width: 100px; display: inline; vertical-align: bottom;" type="text" value="" class="form-control me-1 mb-1" placeholder="Focus me" data-bs-toggle="tooltip" data-bs-title="Tooltip only on focus" data-bs-trigger="focus">
                <div class="position-static d-flex" id="staticContainer">
                  <button type="button" class="btn btn-info me-1 mb-1" data-bs-toggle="tooltip"
                    data-bs-title="&lt;b&gt;Tooltip in static container&lt;/b&gt;&lt;br&gt;This tooltip is added to a position: static container. If the configured container belongs to parent with position: relative, the component will bypass the configuration.">Static</button>
                </div>
                <svg viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" class="me-1 mb-1"
                  data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="click"
                  data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-success'&gt;SVG&lt;/span&gt;&lt;br&gt;Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">
                  <rect fill="rgba(0,0,0,0.01)" stroke="#ccc" stroke-width="1" width="100%" height="100%" rx="5"></rect>
                  <text direction="ltr" fill="#333" x="25" y="25" font-size="14">SVG</text>
                </svg>
                <img class="me-1 mb-1" data-bs-toggle="tooltip" data-bs-placement="top" title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-info'&gt;IMG&lt;/span&gt;&lt;br&gt;Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas." alt="Demo Tooltip for IMG" src="" />
              </div>

              <div class="position-relative mb-3 p-3 bg-light rounded">
                <p style="width: calc(100% - 190px)">This is an a <code>&lt;div class="position-relative"&gt;</code> parent element to hold two position-absolute elements with Tooltip.
                </p>
                <svg viewBox="0 0 80 43" width="80" height="43" xmlns="http://www.w3.org/2000/svg" class="position-absolute absolute-svg" data-bs-toggle="tooltip" data-bs-placement="top"
                  data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-success'&gt;SVG&lt;/span&gt;&lt;br&gt;Perhaps adding even more content would make the job more difficult? Nope, same as if this was a very very short tooltip. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.">
                  <rect fill="white" stroke="#ccc" stroke-width="1" width="100%" height="100%" rx="5"></rect>
                  <text direction="ltr" fill="#333" x="25" y="25" font-size="14">SVG</text>
                </svg>
                <img class="position-absolute absolute-img" data-bs-toggle="tooltip" data-bs-placement="top"  data-bs-title="&lt;b&gt;Demo Tooltip for &lt;/b&gt; &lt;span class='badge bg-info'&gt;IMG&lt;/span&gt;&lt;br&gt;Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas." alt="Demo Tooltip for IMG" src="" />
              </div>

              <iframe src="./tooltip-iframe.html" class="border rounded-5 p-3 mb-3" style="border:none; min-height: 225px; width: 100%;">
              </iframe>
            </section>
          </section>

          <section id="componentBase">
            <h2>BaseComponent</h2>
            <section id="baseInfo">
              <h3>Info</h3>
              <p>Following the development of the original library, we implemented the same solution to remove most repetitive actions common
                to all components; the <b>BaseComponent</b> provides basic functionality generally focused around determining the specific 
                <code>HTMLElement</code> target or setting instance options.</p>
                <p>It also throws an error when no target <code>HTMLElement</code> is found and removes existing instances which is important
                  to prevent memory overflow or breaking the component functionality.</p>
            </section>
            <section id="baseMethods">
              <h3>Base Properties And Methods</h3>
              <p>The <b>BaseComponent</b> component exposes some getters for all components to use:</p>
              <h4>instance.name</h4>
              <p>Returns the name of the component used to initialize the current instance.</p>
              <h4>instance.defaults</h4>
              <p>Returns the component default options values.</p>
              <h4>instance.version</h4>
              <p>Returns the library version.</p>
              <h4>instance.dispose()</h4>
              <p>Removes the component from target element. Components generally extend this method with additional specific functionality.</p>
            </section>
          </section>
        </div>
        <div class="col-md-3" id="side-nav">
          <ul id="nav-scrollspy-v5" class="nav nav-stacked d-none d-md-flex flex-column">
            <li class="nav-item">
              <a rel="nofollow" class="nav-link" href="#componentAlert">Alert</a>
              <ul class="nav">
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#alertMethods">Methods</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#alertEvents">Events</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#alertDATA">DATA API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#alertJS">JavaScript API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#alertExamples">Examples</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a rel="nofollow" class="nav-link" href="#componentButton">Button</a>
              <ul class="nav">
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#buttonMethods">Methods</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#buttonDATA">DATA API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#buttonJS">JavaScript API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#buttonExamples">Examples</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a rel="nofollow" class="nav-link" href="#componentCarousel">Carousel</a>
              <ul class="nav">
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#carouselOptions">Options</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#carouselMethods">Methods</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#carouselEvents">Events</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#carouselDATA">DATA API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#carouselJS">JavaScript API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#carouselExamples">Examples</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a rel="nofollow" class="nav-link" href="#componentCollapse">Collapse</a>
              <ul class="nav">
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#collapseOptions">Options</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#collapseMethods">Methods</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#collapseEvents">Events</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#collapseDATA">DATA API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#collapseJS">JavaScript API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#collapseExamples">Examples</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a rel="nofollow" class="nav-link" href="#componentDropdown">Dropdown</a>
              <ul class="nav">
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#dropdownOptions">Options</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#dropdownMethods">Methods</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#dropdownEvents">Events</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#dropdownDATA">DATA API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#dropdownJS">JavaScript API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#dropdownExamples">Examples</a></li>
              </ul>
            </li>            
            <li class="nav-item">
              <a rel="nofollow" class="nav-link" href="#componentModal">Modal</a>
              <ul class="nav">
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#modalOptions">Options</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#modalMethods">Methods</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#modalEvents">Events</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#modalDATA">DATA API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#modalJS">JavaScript API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#modalExamples">Examples</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a rel="nofollow" class="nav-link" href="#componentOffcanvas">Offcanvas</a>
              <ul class="nav">
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#offcanvasOptions">Options</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#offcanvasMethods">Methods</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#offcanvasEvents">Events</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#offcanvasDATA">DATA API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#offcanvasJS">JavaScript API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#offcanvasExamples">Examples</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a rel="nofollow" class="nav-link" href="#componentPopover">Popover</a>
              <ul class="nav">
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#popoverOptions">Options</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#popoverMethods">Methods</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#popoverEvents">Events</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#popoverDATA">DATA API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#popoverJS">JavaScript API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#popoverExamples">Examples</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a rel="nofollow" class="nav-link" href="#componentScrollspy">ScrollSpy</a>
              <ul class="nav">
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#scrollspyOptions">Options</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#scrollspyMethods">Methods</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#scrollspyEvents">Events</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#scrollspyDATA">DATA API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#scrollspyJS">JavaScript API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#scrollspyExamples">Examples</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a rel="nofollow" class="nav-link" href="#componentTab">Tab</a>
              <ul class="nav">
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#tabOptions">Options</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#tabMethods">Methods</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#tabEvents">Events</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#tabDATA">DATA API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#tabJS">JavaScript API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#tabExamples">Examples</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a rel="nofollow" class="nav-link" href="#componentToast">Toast</a>
              <ul class="nav">
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#toastOptions">Options</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#toastMethods">Methods</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#toastEvents">Events</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#toastDATA">DATA API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#toastJS">JavaScript API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#toastExamples">Examples</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a rel="nofollow" class="nav-link" href="#componentTooltip">Tooltip</a>
              <ul class="nav">
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#tooltipOptions">Options</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#tooltipMethods">Methods</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#tooltipEvents">Events</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#tooltipDATA">DATA API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#tooltipJS">JavaScript API</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#tooltipExamples">Examples</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a rel="nofollow" class="nav-link" href="#componentBase">BaseComponent</a>
              <ul class="nav">
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#baseInfo">Info</a></li>
                <li class="nav-item"><a rel="nofollow" class="nav-link" href="#baseMethods">Methods</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <footer>
      <div class="container">
        <div class="row border-top mt-3 pt-5">
          <div class="col-lg-3 mb-3">
            <a class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none" href="https://github.com/thednp/bootstrap.native" aria-label="Bootstrap">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2 text-success" viewBox="0 0 118 94" role="img">
                <title>Bootstrap Native</title>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path>
              </svg>
              <span class="fs-5">Bootstrap Native</span>
            </a>
            <ul class="list-unstyled small">
              <li class="mb-2">Not affiliated with the original <a class="text-decoration-none" href="https://getbootstrap.com/">Bootstrap</a> and was developed with the help of <a class="text-decoration-none" href="https://github.com/thednp/bootstrap.native/graphs/contributors">our contributors</a>.</li>
              <li class="mb-2">Code licensed <a class="text-decoration-none" href="https://github.com/thednp/bootstrap.native/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>.</li>
            </ul>
          </div>
          <div class="col-6 col-lg-2 offset-lg-1 mb-3">
            <h5>Bootstrap Native</h5>
            <ul class="list-unstyled">
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://github.com/thednp/bootstrap.native">Github</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://github.com/thednp/bootstrap.native/issues" target="_blank" rel="noopener">Issues</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://github.com/thednp/bootstrap.native/wiki" target="_blank" rel="noopener">Wiki</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://www.jsdelivr.com/package/npm/bootstrap.native" target="_blank" rel="noopener">CDN</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://stackoverflow.com/questions/tagged/bootstrap-native" target="_blank" rel="noopener">Stack Overflow</a></li>
            </ul>
          </div>
          <div class="col-6 col-lg-2 mb-3">
            <h5>Links</h5>
            <ul class="list-unstyled">
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://getbootstrap.com/docs/5.3/" target="_blank" rel="noopener">Docs</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://getbootstrap.com/docs/5.3/examples/" target="_blank" rel="noopener">Examples</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://icons.getbootstrap.com/" target="_blank" rel="noopener">Icons</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://blog.getbootstrap.com/" target="_blank" rel="noopener">Blog</a></li>
            </ul>
          </div>
          <div class="col-6 col-lg-2 mb-3">
            <h5>Guides</h5>
            <ul class="list-unstyled">
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://github.com/twbs/bootstrap/docs/5.3/getting-started/" target="_blank" rel="noopener">Getting started</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://github.com/twbs/bootstrap/docs/5.3/examples/starter-template/" target="_blank" rel="noopener">Starter template</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://github.com/twbs/bootstrap/docs/5.3/getting-started/webpack/" target="_blank" rel="noopener">Webpack</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://github.com/twbs/bootstrap/docs/5.3/getting-started/parcel/" target="_blank" rel="noopener">Parcel</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://github.com/twbs/bootstrap/docs/5.3/getting-started/vite/" target="_blank" rel="noopener">Vite</a></li>
            </ul>
          </div>
          <div class="col-6 col-lg-2 mb-3">
            <h5>Projects</h5>
            <ul class="list-unstyled">
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener">Bootstrap 5</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://github.com/twbs/bootstrap/tree/v4-dev" target="_blank" rel="noopener">Bootstrap 4</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://github.com/twbs/icons" target="_blank" rel="noopener">Bootstrap Icons</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://github.com/twbs/rfs" target="_blank" rel="noopener">RFS</a></li>
              <li class="mb-2"><a class="link-dark text-decoration-none" href="https://github.com/twbs/examples/" target="_blank" rel="noopener">Examples repo</a></li>
            </ul>
          </div>
        </div>
        <hr />
        <p class="float-end"><a class="text-decoration-none" href="#myCarousel">Back to top</a></p>
        <p><a class="text-decoration-none fw-bold" href="https://github.com/thednp" rel="noreferrer" target="_blank">thednp</a> &copy; 2015-2025.</p>
      </div>
    </footer>

    <script src="./assets/js/custom-button.js"></script>
    <script type="module">
      import * as BSN from '~/index';
      window.BSN = BSN;
    </script>

    <script src="https://cure53.de/purify.js"></script>
    <!-- <script src="./assets/js/scripts.js"></script> -->
    <script type="module" src="./assets/js/scripts-dev.js"></script>
    <script src="./assets/js/prism.js"></script>
  </body>
</html>
